Image Rollovers w/ CSS

I know how to make rollovers with CSS using a background
image and browser
text, but how would I use CSS to make rollover buttons from
images (text and
button are one image)?
Brandon
==================
Presentations Direct - Binding Machines, Laminators and Paper
Shredders
http://www.presentationsdirect.com
==================

I know how to do that . . . I was hoping to use CSS though
instead of
Javascript.
Brandon
==================
Presentations Direct - Binding Machines, Laminators and Paper
Shredders
http://www.presentationsdirect.com
==================
"Nancy - Adobe Comm. Expert" <[email protected]> wrote
in message
news:eqg14v$860$[email protected]..
> Just have two images for each button .. one is the
button untouched and
> the other is the hover state. Then just use the Rollover
Image object
> from the Object bar and fill in the blanks. DW will do
the rest and code
> the swap.
>
>
> --
> Nancy Gill
> Adobe Community Expert
> Author: Dreamweaver 8 e-book for the DMX Zone
> Co-Author: Dreamweaver MX: Instant Troubleshooter
(August, 2003)
> Technical Editor: DMX 2004: The Complete Reference, DMX
2004: A
> Beginner''s
> Guide, Mastering Macromedia Contribute
> Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced
PHP Web
> Development
>
>
>
>
> "Brandon" <[email protected]>
wrote in message
> news:eqg076$74j$[email protected]..
>>I know how to make rollovers with CSS using a
background image and browser
>>text, but how would I use CSS to make rollover
buttons from images (text
>>and button are one image)?
>>
>> --
>> Brandon
>>
>> ==================
>> Presentations Direct - Binding Machines, Laminators
and Paper Shredders
>>
http://www.presentationsdirect.com
>> ==================
>>
>>
>>
>
>

Similar Messages

  • Image Rollovers with css

    I'm trying to have an image where as you roll over it the
    border colour changes. The problem is the code works in firefox and
    opera but not in Internet Explorer. In Internet Explorer the hover
    part doesn't work at all. Thanks in advance for any help.

    IE only does the :hover pseudo-class on links.
    Try making the images into links and adding the link to the
    selector -
    > #rightlink a img{
    > border: 1px solid red;
    > }
    > #rightlink a:hover img{
    > border: 1px solid blue;
    > }
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "spd998" <[email protected]> wrote in
    message
    news:fhuqo2$noj$[email protected]..
    > I'm trying to have an image where as you roll over it
    the border colour
    > changes. The problem is the code works in firefox and
    opera but not in
    > Internet
    > Explorer. In Internet Explorer the hover part doesn't
    work at all. Thanks
    > in
    > advance for any help.
    >
    > #rightlink img{
    > border: 1px solid red;
    > }
    > #rightlink:hover img{
    > border: 1px solid blue;
    > }
    >

  • New CSS Rollovers not align same as Image Rollovers - Dreamweaver CC

    I have put together a test page replacing Javascript Image Rollovers for CSS Image Rollovers and the alignment of items in the 3 columns (DIVS) is not the same as when old style rollovers. I cannot seem to find the error in my CSS and would like another pair of eyes to see if I'm missing something. Here is the screenshot of new page from Firefox, followed by the CSS. Images are loading into #sidebar1 (left column), #sidebar2 (right column) and #MainContent. #MainContent seems off centered and #sidebar outside margins are different. Any help would be greatly appreciated.
    CSS:
    <style type="text/css">
    <!--
    body {
        font: 81.3% Verdana, Arial, Helvetica, sans-serif;
        background: #666666;
        margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
        padding: 0;
        text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
        color: #000000;
    .oneColFixCtrHdr #container {
        width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
        background: #FFFFFF;
        margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
        border: 1px solid #000000;
        text-align: left; /* this overrides the text-align: center on the body element. */
    .oneColFixCtrHdr #header {
        background: #DDDDDD;
        padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    .oneColFixCtrHdr #header h1 {
        margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
        padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    .oneColFixCtrHdr #mainContent {
        background: #FFFFFF;
        width: 200px;
        margin-top: 0;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 0px;
    .oneColFixCtrHdr #sidebar1, #sidebar2, #mainContent {
        text-align: center;
        width: 200px;
        padding-top: 0px;
        padding-right: 30px;
        padding-bottom: 0;
        padding-left: 30px;
    .oneColFixCtrHdr #footer {
        padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
        background:#CFAF86;
        clear:both
    .teammembers #nav #teammembers a {
        color: #FFF;
    .oneColFixCtrHdr #memberdues {
        padding-right: 315px;
        padding-left: 315px;
    .oneColFixCtrHdr #footer p {
        margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
        padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
        text-align: center;
        letter-spacing: 4px;
    #container #nav {
        line-height: 2em;
        font-weight: normal;
        background-color: #CFAF86;
        text-align: center;
        margin: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-right: 10px;
        list-style-type: none;
        padding-left: 10px;
    #container #nav li {
        font-weight: bold;
        display: inline;
        padding-top: 0px;
        padding-right: 10px;
        padding-bottom: 0px;
        padding-left: 10px;
    #container #nav li a {
        color: #000;
        text-decoration: none;
    #container #nav li a:hover {
        color: #FFF;
        text-decoration: none;
    .renegadestext {
        font-style: italic;
        font-weight: bold;
        color: #000;
    .oneColFixCtrHdr #AboveMainContent {
        padding-top: 0px;
        padding-right: 20px;
        padding-bottom: 0px;
        padding-left: 20px;
    .oneColFixCtrHdr #AboveMainContent h2 {
        text-align: center;
    .oneColFixCtrHdr #sidebar1 {
        background-color: #FFF;
        float: left;
        width: 200px;
    .oneColFixCtrHdr #sidebar2 {
        background-color: #FFF;
        float: right;
        width: 200px;
    #thomasbarber {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/thomas_barber.gif);
         background-repeat: no-repeat 0 0;
    #thomasbarber:hover {
        background-position: 0px -50px;
    #thomasbarber span {
        position: absolute;
        top: -999em;
    #janetbarber {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/janet_barber.gif);
         background-repeat: no-repeat 0 0;
    #janetbarber:hover {
        background-position: 0px -50px;
    #janetbarber span {
        position: absolute;
        top: -999em;
    #karenallen {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/karen_allen.gif);
         background-repeat: no-repeat 0 0;
    #karenallen:hover {
        background-position: 0px -50px;
    #karenallen span {
        position: absolute;
        top: -999em;
    #davidboudreaux {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/david_boudreaux.gif);
         background-repeat: no-repeat 0 0;
    #davidboudreaux:hover {
        background-position: 0px -50px;
    #davidboudreaux span {
        position: absolute;
        top: -999em;
    #melbahanna {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/melba_hanna.gif);
         background-repeat: no-repeat 0 0;
    #melbahanna:hover {
        background-position: 0px -50px;
    #melbahanna span {
        position: absolute;
        top: -999em;
    #kentunderwood {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/kent_underwood.gif);
         background-repeat: no-repeat 0 0;
    #kentunderwood:hover {
        background-position: 0px -50px;
    #kentunderwood span {
        position: absolute;
        top: -999em;
    #shawntrainor {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/shawn_trainor.gif);
         background-repeat: no-repeat 0 0;
    #shawntrainor:hover {
        background-position: 0px -50px;
    #shawntrainor span {
        position: absolute;
        top: -999em;
    #eddieokonski {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/eddie_okonski.gif);
         background-repeat: no-repeat 0 0;
    #eddieokonski:hover {
        background-position: 0px -50px;
    #eddieokonski span {
        position: absolute;
        top: -999em;
    #scotthartman {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/scott_hartman.gif);
         background-repeat: no-repeat 0 0;
    #scotthartman:hover {
        background-position: 0px -50px;
    #scotthartman span {
        position: absolute;
        top: -999em;
    #titoescobar {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/tito_escobar.gif);
         background-repeat: no-repeat 0 0;
    #titoescobar:hover {
        background-position: 0px -50px;
    #titoescobar span {
        position: absolute;
        top: -999em;
    #debbiehanna {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/debbie_hanna.gif);
         background-repeat: no-repeat 0 0;
    #debbiehanna:hover {
        background-position: 0px -50px;
    #debbiehanna span {
        position: absolute;
        top: -999em;
    #robertbarber {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/robert_barber.gif);
         background-repeat: no-repeat 0 0;
    #robertbarber:hover {
        background-position: 0px -50px;
    #robertbarber span {
        position: absolute;
        top: -999em;
    #gregallen {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/greg_allen.gif);
         background-repeat: no-repeat 0 0;
    #gregallen:hover {
        background-position: 0px -50px;
    #gregallen span {
        position: absolute;
        top: -999em;
    #johnmcclung {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/john_mcclung.gif);
         background-repeat: no-repeat 0 0;
    #johnmcclung:hover {
        background-position: 0px -50px;
    #johnmcclung span {
        position: absolute;
        top: -999em;
    #miketisdel {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/mike_tisdel.gif);
         background-repeat: no-repeat 0 0;
    #miketisdel:hover {
        background-position: 0px -50px;
    #miketisdel span {
        position: absolute;
        top: -999em;
    #butchhanna {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/butch_hanna.gif);
         background-repeat: no-repeat 0 0;
    #butchhanna:hover {
        background-position: 0px -50px;
    #butchhanna span {
        position: absolute;
        top: -999em;
    #kimberlyshepherd {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/kimberly_shepherd.gif);
         background-repeat: no-repeat 0 0;
    #kimberlyshepherd:hover {
        background-position: 0px -50px;
    #kimberlyshepherd span {
        position: absolute;
        top: -999em;
    #katrinabartkowiak {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/katrina_bartkowiak.gif);
         background-repeat: no-repeat 0 0;
    #katrinabartkowiak:hover {
        background-position: 0px -50px;
    #katrinabartkowiak span {
        position: absolute;
        top: -999em;
    #michelehartman {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/michele_hartman.gif);
         background-repeat: no-repeat 0 0;
    #michelehartman:hover {
        background-position: 0px -50px;
    #michelehartman span {
        position: absolute;
        top: -999em;
    #aliciaallen {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/alicia_allen.gif);
         background-repeat: no-repeat 0 0;
    #aliciaallen:hover {
        background-position: 0px -50px;
    #aliciaallen span {
        position: absolute;
        top: -999em;
    #melissalockwood {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/melissa_lockwood.gif);
         background-repeat: no-repeat 0 0;
    #melissalockwood:hover {
        background-position: 0px -50px;
    #melissalockwood span {
        position: absolute;
        top: -999em;
    #rustyhanna {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/rusty_hanna.gif);
         background-repeat: no-repeat 0 0;
    #rustyhanna:hover {
        background-position: 0px -50px;
    #rustyhanna span {
        position: absolute;
        top: -999em;
    #karenbarber {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/karen_barber.gif);
         background-repeat: no-repeat 0 0;
    #karenbarber:hover {
        background-position: 0px -50px;
    #karenbarber span {
        position: absolute;
        top: -999em;
    #chrishillman {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/chris_hillman.gif);
         background-repeat: no-repeat 0 0;
    #chrishillman:hover {
        background-position: 0px -50px;
    #chrishillman span {
        position: absolute;
        top: -999em;
    #frankmarshall {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/frank_marshall.gif);
         background-repeat: no-repeat 0 0;
    #frankmarshall:hover {
        background-position: 0px -50px;
    #frankmarshall span {
        position: absolute;
        top: -999em;
    #dorisboudreaux {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/doris_boudreaux.gif);
         background-repeat: no-repeat 0 0;
    #dorisboudreaux:hover {
        background-position: 0px -50px;
    #dorisboudreaux span {
        position: absolute;
        top: -999em;
    #johnburkett {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/john_burkett.gif);
         background-repeat: no-repeat 0 0;
    #johnburkett:hover {
        background-position: 0px -50px;
    #johnburkett span {
        position: absolute;
        top: -999em;
    #lisaburkett {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/lisa_burkett.gif);
         background-repeat: no-repeat 0 0;
    #lisaburkett:hover {
        background-position: 0px -50px;
    #lisaburkett span {
        position: absolute;
        top: -999em;
    #andreagordon {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/andrea_gordon.gif);
         background-repeat: no-repeat 0 0;
    #andreagordon:hover {
        background-position: 0px -50px;
    #andreagordon span {
        position: absolute;
        top: -999em;
    #jeffwilliams {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/jeff_williams.gif);
         background-repeat: no-repeat 0 0;
    #jeffwilliams:hover {
        background-position: 0px -50px;
    #jeffwilliams span {
        position: absolute;
        top: -999em;
    #taylordavis {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/taylor_davis.gif);
         background-repeat: no-repeat 0 0;
    #taylordavis:hover {
        background-position: 0px -50px;
    #taylordavis span {
        position: absolute;
        top: -999em;
    #leearnold {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/lee_arnold.gif);
         background-repeat: no-repeat 0 0;
    #leearnold:hover {
        background-position: 0px -50px;
    #leearnold span {
        position: absolute;
        top: -999em;
    -->
    </style>

    The text isn't centered within the containers for two reasons.
    1. Their display is set to block and
    2. There is nothing telling them to be centered
    One way to fix it would be to change the <a> tags to inline-block and add text-align:center to their parents and everything should center nicely within the columns.

  • Horizontal menu with horizontal sub menu using image rollovers or similar

    Hello,
    I am brand new to web design and working on my first site.  What I lack in skills, I have in free time to learn right now : ) Please let me know if there is a tutorial or other resource that describes what I am trying to do...I've been searching for days and just can't find what I'm after.
    The design concept is a menu of main categories that apear to be floating over an object.  When you hover over one, it looks like it gets pressed down in space resulting in the next line populating with subcategories to be selected.  If you click on the main elements, you would be directed to that page - Services for instance.  If you just hovered over a main category, you would be presented with a list of sub-categories that behave in the same fashion.  If you then clicked on one of the sub-categories, you would be taken to that specific page.
    Here's a sequence of images that show what I'm after.
    I built all this in Illustrator as described in a Lynda.com tutorial.  I then exported slices to dreamweaver and started building content.  Each of the categories and sub categories is a separate slice with images built for the rollovers.  I was able to build the main categories and get them to visually sink upon using an imageswap...now I'm stuck on how to get the second line to behave as I described.
    This is a fun learning experience.  Let me know if there is a better way to achieve the design.  I just stared investigating SSIs as well and see the value in having this menu in just one place, referenced into all my subsequent pages.  I have successfully embeded an SSI footer with rollovers on my page, but this menu problem is really tough for me.
    I really appreciate any pointers.
    Thanks,
    Jeff Prince

    I tried building a Spry Horizontal menu to get what I want, but I had no success there.  Any tips for that?
    On a separate note...I do not know if it is proper to use a 'tabbed panel' for my menu project, but it seems to work fine.  I have built both the top (main category) and bottom (sub category) lines of my menu using spry with .png image rollovers.
    Now I just need to find out how to make the main category button rollover stay 'down' while browsing the subcategories.  I would also like to get the subcategories to populate upon mouseover of the main category, without requiring a selection.  Now that would be slick : )  In my example above, the 'services' title should be depressed while in that submenu and look like 'landscape design'.
    One minor problem is the space created between my subcategory images.  I can't find the .css or .js that is creating that space.  I've really trimmed down all the .css and do not know where else to hunt.
    Thanks for any advice,
    Jeff

  • Spry Photo Gallery Image Size via CSS

    Hello!
    I´ve been customizing the spry photo gallery for a couple of time, but got my little problem when viewing it on a mobile phone. When you load up the pictures with a size of 450 x 300 px for example, put up the right xml file with it´s width and height, so the gallery shows the pictures in that size. So what I want to do is that you can specify the image size with css depending on the device you´re watching the site with. There is div in the css called "mainImage" where the size is in %. When you change it to 75% for example. The pictures are correctly shown with 75% of it´s original size, but the outline (grey background) is still in 100%. When you make this grey background transparent it´s still there and moves the caption down. I guess there have to be done some changes within the SpryImageViewer.js, but I just know very little things about JavaScript. Do you have any clues how to change this to specify the image size via CSS?
    Thank you for your help!!!
    Kind regards,
    Joerg

    I see you are still using Spry 1.5. Have you considered upgrading to 
    Spry 1.6.1?
    Also your XML is broken, if you open up your xml in a normal standards 
    complaint browser such as firefox, you will see that it doesn't render
    a normal tree view as it would do with other xml files. So i suggest 
    checking those errors out.
    Its mainly because you  forgot to close your starting tag of the 
    gallerys node. (<gallery
    base = ""
    background = "#FFFFFF"
    banner = "#F0F0F0"
    text = "#000000"
    link = "#0000FF"
    alink = "#FF0000"
    vlink = "#800080"
    before your xml starts.

  • Editing HTML to create image rollovers

    Greetings,
    I think I've read everything in the forum archives about this, and have received helpful fragments of responses, but am still not able to get image rollovers to work in iWeb.
    1) I've created the actual rollovers in ImageReady, which generates its own html. 2) Following the directions of forum users, I've created a text box place marker on the iWeb page the size of the image with "Put Code Here" inside. 3)I've renamed ImageReady's "images" folder "resources," so as not to confuse it with the "Images" folder iWeb generates. 4) I publish to a folder. 5) Using an HTML editor, I change the file name "images" to "resources" where it appears in the rollover code. 6) I insert the script code from ImageReady into the header of the page html for the page where I want the rollover to go and the body code where the text box place marker is.
    When I upload the site to the host, the image is at the right place on the page, but the rollover effect does not work. This makes me think that the problem is with the script. I've also tried generic rollover scripts recommended in this forum, but those haven't worked either.
    So, the questions: where exactly does the html, both script and image rollover code, go in the iWeb page code? And, where should the folder with the ImageReady images be located?
    Many thanks,
    BnB

    So far I created an .avi file of the client's video and was able to burn a DVD successfully with Pinncle Studios 12 (Adobe could learn a lot from Pinnacle's easy DVD authoring).
    I just hope that I created the most highest quality .avi file though.  I had chose  Microsoft AVI, Video Codec: DV NTSC, Field Type: Lower First, and clicked on Render at Maximum Depth.  Is that the best?  If not, what should I have chosen?
    Right now I'm trying to install the 4.0.1 patch for Encore but I'm getting the error
    Applications Running
    Please close the following applications and retry to continue installing updates:
    PhotoshopServer.exe
    processcoordinationserver
    But I have NOTHING open.
    Now for your question, I have opened my client's video in Premiere Pro CS, clicked on Export, Format: MPEG2-DVD, Quality 5, Frame Rate 29.97 non-drop frame, expanded the source file so that ALL of it is rendered (very stupid for Adobe to have only half of it selected by default), clicked okay. AME popped up, so I clicked on Start Queue.
    I have no idea what to do with the other settings, so I left them at their default settings.  (If you know of the correct settings that I should use for best quality, please let me know).
    This video seemed to render fine, but there's no audio.  I looked back at the settings, and the audio box was checked.

  • How to reference background image url from css?

    Hello,
    I have uploaded some images and css files to the "Shared Components > Images".
    How can I reference my images as "background-image:url('XXX.gif')" for a css element?
    Thanks,
    John

    To make what Tyler said explicit: APEX doesn't perform recursive (or indeed any) substitution on static files, Re: Use uploaded images in uploaded CSS, so images in static files can't be referenced using #APPLICATION_IMAGES# or #WORKSPACE_IMAGES# in style sheets that are themselves static files. The Re: Help with STATIC HTML file reference another STATIC HTML/CSS file..

  • Can I use Web App data string (image) in a CSS hover function?

    I am developing a "show and tell" company employee profile using the Web App. I built my list item and the detailed items. Works fine. However, I have no hover function. So I created  some css - a div id and added a background image then a div hover with another image for the hover. This worked. I moved the code over from Dreamweaver to BC – inside the Web App (the list template). I replaced the image paths with the Web App data string - image ( ex. {tag_employee photo} ). Then I did the same for the hover – I switched out the image to the data string ( ex., {tag_employee photo2} ). It doesn't work now.
    All the CSS is written inside the body so it's not pulling from an outside path. I figured an outside path may not understand the data string.
    How can I get this to link with the image data string? Am I missing something?
    How can I create a image switch using CSS and the hover function WITH the BC Web App data strings?
    Below is how I wrote the DIV id:
    # List_photo {
        height: 200px;
        width: 200px;
        background-image:url("{tag_employee photo (200px)}");
        position: relative;
        margin-bottom:10px;
        display:block;
    # List_photo:hover {
        height: 200px;
        width: 200px;
        background-image:url("{tag_employee photo (hover)}");
        position: relative;
        margin-bottom:10px;
        display:block;
    Thanks!
    Robert

    Hi Robert,
    The concept of what you are doing will work (so long as the <style>s are on the actual page) but you need to append '_value' to any image tag to get the image url and not the HTML output of the image.
    So your tag would be {tag_employee photo (hover)_value}

  • Image, ImageView and CSS - How?

    Hi Again,
    How can I style an ImageView -> Image -> URL from CSS?
    Cheers.

    It would be nice to see how this is done directly to the Image/ImageView but here's a workaround.
    public class ScreenBackground extends CustomNode {
        //default image
        public var url:String = "http://blogs.psychologytoday.com/files/u40/funny-cat.jpg";
        public override function create(): Node {
            return Group {
                content: [
                    ImageView {
                        image: bind getImage(url)
        function getImage(url:String){
            return Image {url: url}
    "ScreenBackground"{
        url: "http://samueljscott.files.wordpress.com/2007/04/homer_simpson.jpg";
    }You should get a picture of homer simpson and not a funny cat.
    Also, how can you specify {__DIR__} inside the css property url value?
    Cheers.

  • Multiple CSS image rollovers on a page

    Hi there,
    So, I have miraculously managed to create my first ever CSS image rollover navigation button on my webpage. This page is an online art gallery so there will be several small image rollover buttons linking to different pages of art.
    My question is now that I've created one CSS rollover, do I have to create a brand new one for each additional button or is there  a way to change the image and name of the existing button?
    Here is my CSS and HTML for the existing image rollover:
    /** Declaration for the a.singleRollover selector **/
    a.singleRollover {
        display: block;
        width: 90px;
        height: 90px;
        overflow: hidden;
        text-indent: 0px;
        font-size: 0px;
        line-height: 0px;
        background-image: url(../Images/CSS%20Rollover/ButtonTOBI.jpg);
        background-repeat: no-repeat;
        background-position: 0 0;
    /** Declaration for the additional states of the a.singleRollover selector **/
    a:hover.singleRollover {
        background-position: 0 -90px;
        background-image: url(../Images/CSS%20Rollover/ButtonTOBI.jpg);
    <div id="smallBox01a"><a class="singleRollover" title="Tobi rollover" href="Images/CSS Rollover/ButtonTOBI.jpg"></a></div>
    The problem is that the background image is already set as ButtonTOBI. Is there a way to specify the image in the HTML each time individually rather than in the main a.singleRollover item? It seems very repetitive to have to go in and create lots of individual CSS rollover buttons.
    Thanks in advance for any help.

    Go here -
    http://www.alistapart.com/articles/sprites
    http://www.tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.a sp
    Read about how to use a single image for all of your menu 'rollovers'.  It works great!

  • Float is not working? I need the text to the right of the image but my CSS isn't working. Help pls

    Hi,
    I am having some unusual difficulty getting my images to float left/right in order to have the text beside the image.  In the image I provided, the red arrow is where I'd like the text to be but no matter what I put in the CSS file, the text begins to the lower right of the image floated left.  Can anyone help me figure out what is going on?  The code for the HTML is located here http://codeviewer.org/view/code:1f51  The code for the CSS is here: http://codeviewer.org/view/code:1f52 
    I am using the CSS code from a website I designed that works fine in that website.  Why isn't it working here?  The image name is "fundraiser.jpg"
    Thanks for your help!

    Problem is due to you not declaring the correct instructions for the class .float-left css selector:
    Change this:
    .float-left {
    margin: 5px 10px 0 0;
    To this:
    .float-left {
    float: left;
    margin: 5px 10px 0 0;

  • Image dimensions in CSS or HTML; or a Bit of Both?

    I'm asking this because I have a site with several pages with small images illustrating text either floated left or right.  I want each image to be the same width but not the same height.  I want to use the same CSS or as much as I can, on each left or each right image.
    Usually, I try not to declare the width in the HTML but put it in the CSS.  Is there much difference?
    One compromise would be to declare the width in the CSS and the height in the HTML.  That seems OK to me but I just want to check if there's a right way to achieve what I'm after.
    Thanks
    Martin

    martcol wrote:
    Hello PZ
    I guess the question isn't should I put the height/width in but what's the most economic option in my situation.
    Say I have 4 small images on my page.  Two float left and two float right.  All the images have the same width but different height.
    The left images are in a <div class="leftimage"> and the right in their own <divs>  so I can have one rule for left or right with the float but I will need different rules to cover the image height.
    So do I can take the image width out of the HTML and cover that in my CSS.  I'd always presumed that the best way to go was to keep your HTML as light as possible.  If I only cover the width of the image in those two rules, I either:
         1) write a rule for each image to cover the unique height and put an id on each image in the HTML
         2) put all height/width declarations back in the HTML
         3) put the width in the CSS and the height in the HTML
    Or go have a glass of red wine!
    Martin
    humm...... for me I'd always put the width and height in the html. I think you can become a little obsessive when trying to keep the html as light as possible. Also if I need to change the width/height of the image at anytime its easier in the html than to go looking for it in the css rules.

  • Image rollovers with Spry fade possible?

    Does anyone know of a way to implement the Spry Fade effect
    so that the result is an image that will fade onmouseover and fade
    out onmouseout?
    Ideally I would use .hover, but this is not available, so I
    have to use onmouseover and onmouseout.
    The problem with this is that if you roll out of the image
    before the fade is complete, when you roll in again, the image
    starts the fade again and does not fade from where it had gotten
    to.
    I could use setInterval and clearInterval, but I was hoping
    that Spry would have a good, fast work around.
    Basically I want a button image that fades seamlessly when
    you rollover it.
    Many thanks.

    quote:
    Originally posted by:
    wriggs
    Does anyone know of a way to implement the Spry Fade effect
    so that the result is an image that will fade onmouseover and fade
    out onmouseout?
    Ideally I would use .hover, but this is not available, so I
    have to use onmouseover and onmouseout.
    The problem with this is that if you roll out of the image
    before the fade is complete, when you roll in again, the image
    starts the fade again and does not fade from where it had gotten
    to.
    I could use setInterval and clearInterval, but I was hoping
    that Spry would have a good, fast work around.
    Basically I want a button image that fades seamlessly when
    you rollover it.
    Many thanks.
    Hi, I have no relevant eixperience with the Spry ajax
    framework, but it can be solved with
    mootools framework easily.
    <img src="yourbutton" id="button" onmouseover="fadein();"
    onmouseout="fadeout();"/>
    <script>
    function fadein() {
    new Fx.Style( "button", 'opacity', {duration: 1000 }
    ).start(0.5,1);}
    function fadeout() {
    new Fx.Style( "button", 'opacity', {duration: 1000 }
    ).start(1,0.5);}
    </script>
    Of course you will need to set the 0.5 opacity property via
    css.
    Regards
    Bagi Zoltán

  • Image gallery with CSS menu

    I have a image gallery (slideshow) created with Flash and
    XML. My website uses a css/javasript dropdown menu for navigation.
    The dropdown menu is hiding behind the slideshow no matter what I
    set it's z-index to. Is there something in flash that lets me set
    its z-index? I could jsut drop the menu off of the page and give a
    return link but that is a workaround and I would much rather stay
    consistent with my site. Any help that could be given would be
    appreciated.
    Mark V.

    "mvanneman" <[email protected]> a écrit
    dans le message de news:
    f9ssu4$346$[email protected]..
    >I have a image gallery (slideshow) created with Flash and
    XML. My website
    >uses
    > a css/javasript dropdown menu for navigation. The
    dropdown menu is hiding
    > behind the slideshow no matter what I set it's z-index
    to. Is there
    > something
    > in flash that lets me set its z-index? I could jsut drop
    the menu off of
    > the
    > page and give a return link but that is a workaround and
    I would much
    > rather
    > stay consistent with my site. Any help that could be
    given would be
    > appreciated.
    try to embed your movie with wmode="transparent"
    lea

  • Safari does not display my background-image from my CSS

    I am creating a web site in which I want an image to be seen in the backgound with the text "floating" over it. The code is listed below.
    /* CSS Document */
    a{text-decoration:none}
    body {
    background-image:url(images3/greywolf1.jpg);
    background-attachment:fixed;
    background-position:top right;
    background-repeat:no-repeat;
    height:100%;
    The image can be seen in IE, Netscape and Firefox but not in Safari. Is there a trick to this for Safari or does Safari not support this?
    You can view the current page I am working on at:
    www.killeenisd.org/shoemakerhs/main.html
    Thanks for anyy help you can give me.
    qtmouser

    Thank you. Though there was a closing brace on the body message, I ended up retyping the entire script and it worked.

Maybe you are looking for

  • WBS Elements record seection

    I am completely new to PS and i would appreciate if I get some help in answering below questions. I am in middles of coding a report program and I need to find list of all " Open WBS Elements with No Cummilative Balace". Which table and field do I ne

  • Make a picture fit the full screen when published?

    I can´t seem to get my picture to fit the full screen when I publish it. There are some alternatives. To drag the picture into the canvas and enlarge it. Drag it into the Page background or drag it into the web browser background. Iv tried them all a

  • Weird "recoiling spring" sound coming from lower left corner of my macbook

    My macbook pro 15" (2.16Ghz, 2Gb RAM, 100Gb 7200 RPM drive) has been emitting a weird spring-like sound since it was new. It doesn't do it all the time, and frequency seems to vary from once or twice every 15 minutes up to 2 or 3 times in one minute.

  • Need to select XMLTYPE data in unindented form, from a query.

    I need to select XMLTYPE data among relational data as an xml element. SELECT   XMLSERIALIZE(DOCUMENT   XMLELEMENT ("Account",       XMLATTRIBUTES (LPAD(ROWNUM, 10 , '0')        AS "recordId"    )        ,XMLELEMENT ("Header"            ,XMLELEMENT (

  • How to close timeout  connection in SQLDBC ?

    Hello, I use SQLDBC to access MAXDB 7.7.0.7.16 database, i have the following issue : When a connection reach timeout, I close the connection, and the release the connexion, and then I create a new connection To close connection I call my Disconnect