Question:

How can I use HTML (no Javascript please) to make a code that will change an image on mouseover?

by  |  earlier

0 LIKES UnLike

I would like to use HTML to make one image change into another image entirely when I hover my mouse cursor over it. I cannot use Javascript because I would like to use this code on my Myspace profile. If anyone knows how to do this without using Javascript (HTML only please) I would certainly like to know. I've tried looking up codes and whatnot on the internet and I can't seem to have any luck. If there are any HTML geniuses out there that can help me, please please please! Thanks to anyone and everyone in advance who chooses to answer my question with an honest answer.

 Tags:

   Report
Answer The Question I've Same Question Too

3 ANSWERS

Sort By: Date  |  Rating

  1. <html>

    <head>

    <style>

    #imgSwap {

    background-image: url(your_first.jpg);

    display: block;

    /* set height and width for your actual image */

    height: 100px;

    width: 100px;

    text-decoration: none;

    }

    /* only changing image - presumes same height and width */

    #imgSwap:hover {

    background-image: url(your_second.jpg);

    }

    </style>

    </head>

    <body>

    <!--

    abuse the anchor tag to make sure all browsers respect

    the hover pseudo-class

    -->

    <p><a id="imgSwap" href="#"> </a></p>

    </body>

    </html>


  2. i doubt you can do that without javascript.

  3. It is possible.  It's a little complicated and it will only work in modern browsers (read: it won't work in Internet Explorer without a workaround) but I'll do my best to explain.

    First, you need to know the dimensions of the image.  For this example I'm going to assume the image is 200x50.

    Now comes the code that makes this work.  This part can go anywhere...

    <style type="text/css">

    div.hoverImage {

    width: 200px;

    height: 50px;

    display: table-cell;

    background-image: url('URL TO FIRST IMAGE');

    }

    div.hoverImage:hover {

    background-image: url('URL TO SECOND IMAGE') !important;

    }

    </style>

    Obviously, replace the numbers after width: and height: so that they match the size of your image.

    URL TO FIRST IMAGE should be the direct link to the image you want displayed when the mouse isn't over it.  This is the image Internet Explorer will display all the time since it ignores hovers.

    URL TO SECOND IMAGE should be the direct link to the image you want displayed when the mouse is over it.

    Now, instead of using the img tag to put the image on your page we're going to use a div.  You can cut and paste this code where you want the image.  You can even use it more than once...

    <div class="hoverImage"></div>

    If you want to do more than one of these with different images just change every occurance of "hoverImage" with a new name like "hoverImageA" and duplicate everything using the URLs to the new images.

    For this to work in Internet Explorer the image has to be a link, and even then I'm not 100% sure if it will work since I haven't tested it.

    If you need more clarification or want to know the work around to (maybe) make it work in Internet Explorer you can contact me from my profile.
You're reading: How can I use HTML (no Javascript please) to make a code that will change an image on mouseover?

Question Stats

Latest activity: earlier.
This question has 3 answers.

BECOME A GUIDE

Share your knowledge and help people by answering questions.
Register Now