4 Replies Latest reply: Jul 31, 2012 7:16 PM by Nancy O. RSS

    image rollover

    dawnnolan54 Community Member

      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?

        • 1. Re: image rollover
          Jon Fritz II CommunityMVP

          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

          • 2. Re: image rollover
            dawnnolan54 Community Member

            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.

            • 3. Re: image rollover
              Jon Fritz II CommunityMVP

              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>

              • 4. Re: image rollover
                Nancy O. CommunityMVP

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

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

                 

                 

                 

                Nancy O.