Skip navigation
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?

 
Replies
  • Currently Being Moderated
    Jul 31, 2012 11:03 AM   in reply to dawnnolan54

    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:
  • Currently Being Moderated
    Jul 31, 2012 11:20 AM   in reply to dawnnolan54

    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:
  • Currently Being Moderated
    Jul 31, 2012 7:16 PM   in reply to dawnnolan54

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

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

     

     

     

    Nancy O.

     
    |
    Mark as:

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