Skip navigation
dawnnolan54
dawnnolan54
Currently Being Moderated

image rollover

Jul 31, 2012 10:07 AM

I have several clickable images.  I would like to make the images appear to go up and out a little bit (like it's floating) on rollover.  Can anyone tell me how to do this?

465 Views   4 Replies   Latest reply: Nancy O., Jul 31, 2012 7:16 PM
 
Replies
  • Jon Fritz II
    Currently Being Moderated
    1. Jon Fritz II,
    Jul 31, 2012 11:03 AM   in reply to dawnnolan54
    Report

    You can do this a couple different ways. The Swap Image behavior is probably the easiest. Create two images with the same dimensions, one for your off state and one for the mouse-over state.

     

    Place the Off State image on your page

    In the Tag Inspector click the Behaviors button

    Click the Add Behavior drop down button

    Choose Swap Image

    Select the image you just placed

    Set Source to your Mouse over state

    Hit OK

     
    |
    Mark as:
  • dawnnolan54
    Currently Being Moderated
    2. dawnnolan54,
    Jul 31, 2012 11:14 AM   in reply to Jon Fritz II
    Report

    I want to use the same image but make it look almost 3-d on mouseover.  Do I do that with positioning?  And if so, how?  Am fairly new to dreamweaver.

     
    |
    Mark as:
  • Jon Fritz II
    Currently Being Moderated
    3. Jon Fritz II,
    Jul 31, 2012 11:20 AM   in reply to dawnnolan54
    Report

    You could do it with CSS and actually have the div your image is in move when you mouse over it.

     

    In your header:

     

    <style type="text/css">

    #buttondiv {

     

    position:relative;

    height:100px;

    width:100px;

    top:20px;

    left:20px;

    background-color:red;

     

    }

     

    #buttondiv:hover {

     

    position:relative;

    height:100px;

    width:100px;

    top:25px;

    left:25px;

    background-color:red;

     

    }

     

    </style>

     

    Then in your <body>

     

    <div id="buttondiv">your image or whatever here</div>

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    4. Nancy O.,
    Jul 31, 2012 7:16 PM   in reply to dawnnolan54
    Report

    If your coding skills are solid, you could do this with CSS Transitions/Transforms .

    http://css3.bradshawenterprises.com/all/

     

     

     

    Nancy O.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points