Web Analytics Made Easy -
StatCounter mouseover image help - CodingForum

Announcement

Collapse
No announcement yet.

mouseover image help

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • mouseover image help

    I would like to have an image color change when mousing over it, thus defining it as a link. What do I have to do to make this happen? Thanks.

  • #2
    You have to have two images.

    Oh, you could change the *BORDER* color easy enough, but you can change the contents of an image, per se. (I guess you could put a semi-transparent overlay over the image, but that would (a) be a LOT more work and (b) obscure the image somewhat. So just go with two images. Or be happy with the border color changing.)
    Be yourself. No one else is as qualified.

    Comment


    • #3
      you need to change colours using any image editor, and then to set the second image as the mouseover

      Comment


      • #4
        Thanks for the reply. Would you know how to make the two images switch with a mouseover? I'm assuming it'd be javascript?

        Comment


        • #5
          Yes. thank you. I didn't like the border effect. Would you know how to switch two different color graphics with a mouseover? Thanks.

          Comment


          • #6
            if you just want your image to change brightness, you might try this.


            http://h1.ripway.com/stirfry/javascr...acitySwap.html

            Comment


            • #7
              I couldn't tell from this link how an image changes brightness. It shows a small box upper left side that doesn't change at all. I checked this in Safari and Firefox browsers. Thanks.

              Comment


              • #8
                don't know what to tell you. The image changes opacity onmouseover and brightens up since the background is no longer visible through it. It works in opera and firefox and if you find out the CSS for IE you can make it work for that too, but I'm too lazy to worry about IE.

                Comment


                • #9
                  Originally posted by petalmax View Post
                  I couldn't tell from this link how an image changes brightness. It shows a small box upper left side that doesn't change at all. I checked this in Safari and Firefox browsers. Thanks.
                  Another way is to fade all other links/images when hovering.

                  Comment


                  • #10
                    You could change some aspects of the image without javascript simply by using css. You could declare a div within the link, and make your image the background image. Then declare a hover property to change the image:
                    Code:
                    <div id="div1"><a href="#">&nbsp;</a></div>
                    Your styles would be something like:
                    Code:
                    #div1 a {display: block; background-image: url(Trees1.jpg); width:300px; height: 247px; }
                    #div1 a:hover {background-image: url(Trees2.jpg); }
                    You may find it helps to pre-load the hover image. Note I have given the div a height and width corresponding to my images. Here is a example of this: http://www.actinia.me.uk/hover/hover.htm

                    John
                    Last edited by Actinia; Apr 6, 2009, 07:02 AM. Reason: Added working example

                    Comment


                    • #11
                      Originally posted by petalmax View Post
                      Thanks for the reply. Would you know how to make the two images switch with a mouseover? I'm assuming it'd be javascript?
                      If you use e.g. Dreamwaver, it can be added in the design mode, so that you don't need to write any scipt

                      Comment


                      • #12
                        Originally posted by Actinia View Post
                        You may find it helps to pre-load the hover image. Note I have given the div a height and width corresponding to my images. Here is a example of this: http://www.actinia.me.uk/hover/hover.htm

                        John
                        Hello
                        I found the rollover effect quite delaying all the time so I tried to experiment a mouse-over with a "semi-transparent" using the DIV tags within a DIV container. Got it almost working but if I mouseover the original image (which actually should still be seen, but dimmed, because of the semi-transparent, so this original image just disappears... I am a bit lost here and wonder if someone here could help out?

                        I's all CSS, no java script

                        Thanks a lot

                        Comment


                        • #13
                          Originally posted by Old Pedant View Post
                          You have to have two images.

                          Oh, you could change the *BORDER* color easy enough, but you can change the contents of an image, per se. (I guess you could put a semi-transparent overlay over the image, but that would (a) be a LOT more work and (b) obscure the image somewhat. So just go with two images. Or be happy with the border color changing.)
                          Old Pendant, First, how do I thank you, and anyone else for a reply? Second, could you give an example of the border color changing around an image with a hover, and when already visited? I'm assuming it'd be CSS. Thanks!

                          Comment


                          • #14
                            Originally posted by Lapsi View Post
                            If you use e.g. Dreamwaver, it can be added in the design mode, so that you don't need to write any scipt
                            Thanks, but I don't use dreamweaver. Although, sometimes I wish I did!

                            Comment


                            • #15
                              Originally posted by Renegades View Post
                              Hello
                              I found the rollover effect quite delaying all the time so I tried to experiment a mouse-over with a "semi-transparent" using the DIV tags within a DIV container. Got it almost working but if I mouseover the original image (which actually should still be seen, but dimmed, because of the semi-transparent, so this original image just disappears... I am a bit lost here and wonder if someone here could help out?

                              I's all CSS, no java script

                              Thanks a lot
                              Would you have an example of how to preload images? I don't seem to have a problem with images loading here, but, if there's a way to make it more eficient for others.. Thanks!

                              Comment

                              Working...
                              X