Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and beginning April 20th, 2021 (Eastern Time) the Yahoo Answers website will be in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.

Trending News

Promoted
shugashayne
shugashayne asked in Computers & InternetProgramming & Design · 1 decade ago

What's the HTML code for having a new image appear when you hover your mouse over the original?

What I want to do:

1) I have an image

2) Someone hovers their mouse over it

3) Another image appears in the original image's place

Thanks!

Update:

Thanks for the help so far

I have written the javascript into my blogger template, so that's all set up.

I just don't know how to actually execute it now

Update 2:

This is the javascript I have so far:

<!--MOUSEOVER SCRIPT START-->

<script type='text/javascript'>

//<![CDATA[

function pat_getByClass(c){

ems=new Array();e=document.getElementsByTagName('*');pattern=new RegExp('(^|\\\\s)'+c+'(\\\\s|$)');

for(i=0,j=0;i<e.length;i++)if(pattern.test(e[i].className)){ems[j]=e[i];j++;}

return ems;

};

function ps_flipit(){

var c = pat_getByClass('flipit');

for(i=0;i<c.length;i++){

c[i].firstChild.onmouseover=function(){

this.style.display='none';

this.parentNode.lastChild.style.display='';

};

c[i].lastChild.onmouseout=function(){

this.style.display='none';

this.parentNode.firstChild.style.display='';

};

}

}

ps_flipit();

//]]>

</script>

4 Answers

Relevance
  • xxxjj18
    1 decade ago
    Favorite Answer

    This would be, as stated, JavaScript. And if you want a code like this, then I would recommend trying something like this:

    the HTML code:

    <img src ="test.PNG" name ="1" onmouseOver="1()"

    onmouseOut="1at()" />

    Javascript:

    <script type="text/javascript">

    function 1()

    {

    document.1.src ="rollOverImage.PNG";

    }

    function 1a()

    {

    document.1.src ="test.PNG";

    }

    </script>

    Source(s): experience / w3schools.com
  • orrell
    Lv 4
    5 years ago

    you additionally can do this with the mouse over determination in Java script. look at WebMonkey to get some information on the syntax (and to easily decrease and reproduction the code). i exploit that each and all of the time while i'm doing pages. :)

  • Cami
    Lv 4
    1 decade ago

    With the first answerer I agree it is used with Javascript.

  • Anonymous
    1 decade ago

    It uses javascript to do this most the time...

    alternatively, try googling 'image rollover CSS'...you may be able to pull it off without JScript

Still have questions? Get your answers by asking now.