Hotspots or links on background image with checkerboard to fluid.

I have a fluid grid presentation in CS6 with a home page with a background image (javascript that loads different images.  What is the best way to bind or 'hot spots' more than one large image for three menu items in random places on this page?

Is your native Photoshop PSD image with layers?  You must save the background (building & logo) as a single image layer.  Then each of the 3 menu items save it as transparent PNGs without the background layer.

Put the background.jpg in your head with CSS.

Insert the Menu.pngs in your HTML and link them as needed.

Just to let you know, the web pages that contain nothing but images do not exist for the search engines, readers screen or the language translators.  You really need to insert text rich true keyword inside

,

,

and

Tags.   Without content keyword rich, nobody will ever find your site in searches on the web.

Also consider that many mobile users disable the images to record the minutes of data.  If your site is nothing more than images, they won't see much.

Nancy O.

Tags: Dreamweaver

Similar Questions

  • Newbie: background image with overlay problems

    I use a large background image with several circles superimposed over the image. When the image is resized to different browser screens, overlays remain unchanged, even if the changes of background image to fit the browser. As a result, overlays eventually his place with respect to the substantive parts and cover image, I don't want to not covered. Clearly, I'm a newbie with dreamweaver. Useful links?

    Mark

    This approach to layout does not work in flow layout (%).   APDivs are removed from the normal document flow and thus remain absolutely where you positioned them.

    Cards images do work either in fluid layouts.  As the picture re-sizes to fit the display window, the hotspot regions are not.

    When you create responsive Layouts, review your Mobile implementation objectives first.  Then tablets and desktop computers.  And above all, to keep things simple.

    Responsive Web Design

    http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-Web-design/

    Introduction to CSS Media Queries

    http://www.Adobe.com/devnet/Dreamweaver/articles/introducing-media-queries.html

    Nancy O.

  • Try a background image with a PNG with transparency matte / partial transparency

    Hello everyone.

    Here's the scenario;

    1. I have a PNG sequence rendered in a 3d program. The sequence has a landscape that is partially transparent and has no background image or color. In the animation, which is not the landscape is 100% transparent, while the landscape is partially transparent.
    2. I have a background that I want to put behind the PNG sequence but I don't want the background visible through the part of the landscape of the sequence, only the portion that is 100% transparent.

    I tried several different methods, but because the landscape is partially transparent, with a matte (alpha or alpha reverse) or blend (such as stencil alpha) mode does not give me the results I'm looking for.

    I'm looking for is a way of mast (or mask) the background image with only the part of the PNG that is 100% transparent. In this way, the background image are not displayed in the semi transparent landscape, but will be visible in the part that is 100% transparent.

    I would like to find a reasonable solution in After Effects, as opposed to the sequence of 3d objects rendered being invisible to the camera and the current background. The landscape scene itself took a considerable amount of time to make (120 hours) and I would like to avoid this kind of delay in my project.

    Thank you all in advance for your consideration.

    Maybe I said incorrectly: you cannot use the 3D app to generate a matte black and white simple - or mattes - to separate properly, then just composite in AE?

  • Help with a link to background image

    Hello

    I typed the link and has turned into a link and css to set properties either active, visited, hover.

    When you move the link, I want a background image to appear under the first picture below. I am able to put the background image as underscore in the css hover. I put the bottom position (y) to place it at the bottom, but I need more space between the type and the image. If I dictate the number of pixels to move the image down, once it gets to a certain point he cuts. Please see the second image for this.

    Link1.jpg

    link2.jpg

    Any help would be appreciated on how I can create more space between the type and the image without losing the image.

    Thank you.

    Alex

    CSS menu:

    a {text-decoration: none}

    a: link {}

    color: #FFF;

    Background: #666;

    }

    a: visited {color: #999}

    a: hover, a: active, a: {emphasis

    Background: #333;

    text-decoration: underline;

    border-bottom: 4px solid gold;

    }

    / * horizontal navigation bar * /.

    NAV UL, nav li {}

    margin: 0;

    padding: 0;

    list-style: none;

    font-size: 20px;

    make-weight: bold;

    text-align: center;

    }

    nav li a {}

    float: left;

    Display: block;

    Padding: 6px;

    line-height: 1.2em;

    Width: 8th;

    }

    HTML:

    What it looks like:

    Nancy O.

  • Background image with scrolling not for the screen

    Hi all.

    I use the following code to make the background dropdown not image, and it works for all BlackBerry Storm2 (OS 5.0) except (I tried it on a simulator):

    public class MyScreen extends MainScreen{
    
    ...
    
        public MyScreen() {
           super(NO_VERTICAL_SCROLL);
           bitmap=loadBG();       super.add(mContainer = new BGVerticalFieldManager(bitmap));
        }
        public void add(Field field){        mContainer.add(field);    }...
    
    }
    
    public class BGVerticalFieldManager extends VerticalFieldManager {
        Bitmap mBgBitmap = null;
        int mBgWidth = -1;
        int mBgHeight = -1;
        int mBgX = -1;
        int mBgY = -1;
    
        public BGVerticalFieldManager(Bitmap background) {
            super(USE_ALL_WIDTH | USE_ALL_HEIGHT | VERTICAL_SCROLL
                    | VERTICAL_SCROLLBAR);
            mBgBitmap = background;
            mBgWidth = mBgBitmap.getWidth();
            mBgHeight = mBgBitmap.getHeight();
            mBgX = (Display.getWidth() - mBgWidth) >> 1;
            mBgY = (Display.getHeight() - mBgHeight) >> 1;
    
        }
    
        protected void paintBackground(Graphics graphics) {
            paintBackgroundBitmap(graphics);
        }
    
        protected void sublayout(int maxWidth, int maxHeight) {
            mBgX = (Display.getWidth() - mBgWidth) >> 1;
            mBgY = (Display.getHeight() - mBgHeight) >> 1;
            super.sublayout(maxWidth, maxHeight);
        }
    
        private void paintBackgroundBitmap(Graphics graphics) {
            if (null != mBgBitmap) {
                int x = mBgX
                        + getHorizontalScroll();
                int y = mBgY
                        + getVerticalScroll();
                graphics.drawBitmap(x, y, mBgWidth, mBgHeight, mBgBitmap, 0, 0);
            }
        }
    
    }
    

    The Storm2 scrolls the background image, looks that getVerticallScroll() does not work.

    Can someone help me with this?

    Thank you.

    also have glance at this:

    http://supportforums.BlackBerry.com/T5/Java-development/use-a-background-image-in-application-screen...

  • How can I show a background image with a variable?

    I try to explain it:



    I have a div called "entrante1_ctn" that must contain a background image. This code works, but I don't want to do...


    sym.getComposition () .getStage ().getSymbol("entrantes_sym").$("entrante1_ctn").css ('backgro undImage','url(images/entrantes/entrante1.png)');


    I would like to the somtehing like that...


    sym.getComposition () .getStage ().getSymbol("entrantes_sym").$("entrante1_ctn").css (' undImage ',' url backgro ( variable )');


    The variable is a table element, but this code does not work:


    sym.getComposition () .getStage ().getSymbol("entrantes_sym").$("entrante1_ctn").css (' undImage ',' url backgro ( ent_1 [0] )');



    Please, helpp!

    Hi or Hello,

    • The principle( general case) ==> .css ("background-image ',' url(images/myImage.png)'");
    • With a variable (a variable):

    var image = "images/myImage.png ';

    . CSS ("background-image", "url (" + image +') ');

    • Your particular case (your case) ==> .css ('background-image', ' url ('+ ent_1 [0] + ')');
  • Map-image + link in background image

    Is it possible to put a map image and a link to a background picture of a table?

    No, but you can put a 1px by 1 x empty transparent image over the background image and adds an image map

  • Different background image with each page?

    Hello Adobe community,

    I'm working on my portfolio and immerse myself in the CSS, I seems to have hit a bump in the evolution of the background image to each page.

    I watched a previous response and changed my style sheet to reflect the body classes that I did, but nothing seems to go right!

    http://dayandnightwebsolutions.com/

    Thank you

    Robert

    Edit, my images are locaed in '\public_html\img '.

    My CSS stylesheet is located in "\public_html\css".

    Then...

    Page needs to look inside...

    Body.index {background-image: url (.. /IMG/main-BG.jpeg);}

    Body.Services {background-image: url (.. /IMG/BG-Moon.jpeg);}

    Body.contact {background-image: url (.. /IMG/BG-Sun.jpeg);}

    ?

    Your file extension isn't actually .jpg and .jpeg. Change this in your CSS.

    Remove the prefix of body for all classes. Just use .index, .to & .contact in your CSS file. When using it in your HTML markup, include this class in any switch like body or div or any other thing.

    And above all, should any space between the url and (.)

    Change this:

    Body.index {background-image: url (.. /IMG/main-BG.jpeg);}

    to do this:

    .index {background: url (.. /IMG/main-BG.jpg);}

    Note that I deleted - image. This can be read by most modern browsers and is a short form. You can add properties of background much like repetition, position, etc. in the main tag 1.

    Trust that this assistance.

  • Background banner sliding checkerboard to fluid

    Hi all...

    Hope someone can help me. Type of new programming and dream weavers fluid grids. But I started working on a Web site and encountered a problem.

    How to implement a banner background slide in the design of the fluid grid?

    PS: My design looks like this, and I intend to use a cursor for the banner javascript (don't mind the Danish language):

    BB - Webdesign desktop.jpg

    the logo, menu, headlines and navigation cursor is placed above the slider.

    This will fail for several reasons.

    #1 FGLayouts resize as do images of leading inside of them.  However, menus & titles don't resize.  They remain the same size, regardless of the display window, unless you call your own special CSS media queries to modify them.

    #2 background images don't resize to available.

    #3 to have a cursor appears behind your logo, the menu and the headines, you need elements of the layer with absolute positioning.  And as we know from several threads on this forum, absolute positioning does not well in sensitive layouts because ultimately, everything becomes a confused mess.

    The best advice, keep your cursor separated from your site menu and titles.  You will have less problems like that.

    Nancy O.

  • How to make the background image with dramatic style?

    Most of the images I see it is mix of pattern in the background which make it look alive. The model are lines and shiny effects. How do these lines

    oshop http://PSD.tutsplus.com/tutorials/Tutorials-Effects/Creating-a-Mac-type-background-in-phot.

    http://www.Tutorial9.NET/Photoshop/creating-the-Windows-Vista-lighting-effect/

    http://psdlearning.com/2008/06/luminescent-lines/#more-45

    Search for abstract Photoshop etc.

  • Background image with the contents of the scale?

    Hello

    I have a HBox and I want to insert a picture in it. I want the image to FILL the whole box. The photo is quite large so I want that it is in the box.

    Start with the problem.

    1. If I use HBox backgroundImage, it does not give me "content scale" property, and no matter how I tweek the size of the image, I see only the upper part of the image.

    2. If I use the tag of the image inside the HBox, if the image is large horizontally, so I can see the upper and lower part of the HBox, if the image is large vertically then I see the part right and left of the HBox. To maintain the proportions, it fills up not all HBox.

    I don't want to change the dimensions of the HBox.

    Any idea?

    It's my code.

    <? XML version = "1.0" encoding = "utf-8"? >

    < mx:Application

    ' xmlns:mx = ' http://www.Adobe.com/2006/MXML "layout =" " absolute "verticalAlign =" " way "horizontalAlign =" " Center "

    >

    < mx:HBox " width = ' 200 "height =" 230 "backgroundColor =" #000000 " " > "

    < mx:Image " scaleContent =" true "source =" " images/S1.jpg "height =" " 100%

    "

    width ="

    100% "verticalAlign =" " way "horizontalAlign =" " Center "

    / >

    < / mx:HBox >

    < / mx:Application >

    So, you want the image spread out of proportion to fill the box?

    maintainAspectRatio = "false".

    In your test code, image now fills the entire HBOX.

  • Apex 5.0: Theme Roller and background image

    Hi all

    I'm new to APEX 5, but have many years experience with HTMLDB/APEX.

    I created a dummy application with only a blank page. Now I want to give a background image for all the pages of my apex application. To do this, I downloaded a picture of 'images of the workspace' and now, I would like to use this image as a background image. Here are my questions:

    1. How can I declare this image as background image using the custom field 'CSS' roll theme?
    2. Is this possible using the theme roller?

    Thank you

    Hi S-Max,

    of course, it is possible and it is not necessary to change the universal theme page templates. You can easily do with theme roller.

    1. Go to components-> themes-> universal theme shared
    2. Scroll down to the region of "files".
    3. Download your background image with the 'Upload File' button (Note: this is not a static file request or workspace, instead, this will be a static file of the theme!)
    4. Run your application
    5. Open the theme roller and choose your theme style
    6. Go to the "Custom CSS" attribute
    7. Use the CSS code you have pasted above, but delete #WORKSPACE_IMAGES #.
    8. Click Save / Save as (-> generates the new theme CSS stylesheet file, which is stored as a static file of the theme next to your background image.) That's why you can make reference to the image with a relative URL).
    9. Click the current value (if the custom theme style is not already the current)
    10. Topic close Roller
    11. The above generated theme style CSS file gets charge and your background image should display

    Concerning

    Patrick

    ---

    Member of the APEX development team

  • Background image for Aftable

    Hi all

    I use JDeveloper 11.1.1.7.

    My scenario is need to show a < af:table > with the background image. I tried this in CSS,

    AF | table. MyTable
    {
    background-image: url("..) ("/ img/sampleImage.png");

    }

    It works fine without the data from the table. But after reading the lines the background image is hidden.

    How to set the background image with lines in the table?...

    Thank you
    Arun D.

    Edited by: T.. June 1, 2013 17:46

    I guess you have to make the background of transparent cells.

    Timo

  • DW5.5 - the header background image partially repeats in Safari and IE

    I have a header banner is a background image with the type of navigation above the image, published at http://www.saarts.com.au/designyo

    The banner is displayed correctly in Firefox, but in Safari and IE the 10px up (approximately) of the header image that repeats only once directly under the header bar.

    Clues?  Thank you.

    It's because of top padding on the table cell

    {.topnavigationtext}
    color: #CCCCCC;

    do-size: 10pt;

    padding-right: 10px;

    padding-top: 22px;

    }

    Remove and the cell of the table shrinks in height and repeating BG image disappears.

  • Addition of 2 background images

    Hi all!

    I'm trying to understand if it is possible...

    I have 1 horizontal image to the body that acts as a gradient background, but then, I would like to add a second background image with the horizontal. I need two images to repeat in the width 100% behind all the other elements like header, container, etc. But it seems that I can use only 1 background image in the body.

    Is it possible to add 2?

    Since you want to go behind everything, simply create a div that surrounds your content and apply the background to that.

    body {
      background-image: url('images/imageA.jpg');
      margin: 0;
      padding: 0;
    }
    #wrapper {
      width: 100%;
      background-image: url('images/imageB.jpg');
      margin: 0;
      padding: 0;
    }
    
    
    
    All your page content goes here

Maybe you are looking for

  • Satellite A200 PSAF6A - HARD drive is not recognized. No recovery of product

    The drive HARD in my Toshiba Satellite A200 PSAF6A-0US01N is not recognized in the machine or any other computer, so I can't run any windows/toshiba repair. I know that readers have a factory reset hidden on the disc and press 0 to the power upward,

  • CmtGetLock Casuing a single thread to gel

    Hello. I have a test system that two identical test DUT simultaneously using two threads of the same code. Within these two threads, I need threads so that a single physical interface can be shared between the two units under test. My problem is that

  • LabVIEW FPGA: Compilation failed due to an error of xilinx

    I'm getting a 'Compilation failed due to the error of Xilinx' you try to compile the code in LabVIEW 2013.The code has successfully compilated in labview2012. Any suggestions on what is causing this problem? Details:ERROR: HDLCompiler:432 - "C:\NIFPG

  • Since the update of audio driver, no audio output

    When I play a video through the VLC browser I hear no audio. Reconizes the sound device, but somewhere, it won't. I noticed today that some audio drivers updated automatically so maybe that is the problem? I'm stuck, and hoping you can help out me. T

  • connectivity issues 8800

    Hello I have an application that connects through the socket connection to a server and sends and receives data. This app works fine for all the tested emulators, except 8800, for which device connections made on BES/MDS are not carried out. By direc