Looking for code: img that changes img on mouseover

[Oppression]

hello!

i used to use:

<A HREF="http://www.cnn.com"
onMouseOver="document.pic1.src='main2.jpg'"
onMouseOut="document.pic1.src='main.jpg'">
<IMG SRC="main.jpg" BORDER=0 NAME="pic1">
</a>


im confused its been awhile...

all i want is a img to change to diff img on mouse over as a link as well!

any thoughts?

[Gudlife]

I personnaly use jquery.

<a href="http://www.cnn.com" id="main">
<img src="first.jpg" border=0 name="pic1" id="mainpic">
</a>

<script type="text/javascript">
$('#main').hover(function(){
$('#mainpic').attr('src','second.jpg');
}, function(){
$('#mainpic').attr('src','first.jpg');
})
</script>

[Gudlife]

...

[srajesh]

hello!

i used to use:

<A HREF="http://www.cnn.com"
onMouseOver="document.pic1.src='main2.jpg'"
onMouseOut="document.pic1.src='main.jpg'">
<IMG SRC="main.jpg" BORDER=0 NAME="pic1">
</a>


im confused its been awhile...

all i want is a img to change to diff img on mouse over as a link as well!

any thoughts?

Try do this

<img src="/image.jpg" width="150" height="100" name="image_name"
onmouseover="image_name.width='300';image_name.height='200';"
onmouseout="image_name.width='150';image_name.height='100';" />

[Oppression]

that makes sense.

and thanks!

I will try that!

[Major Payne]

Simple:

<img src="image1.gif" onmouseover="this.src='image2.gif'" onmouseout="this.src='image1.gif'" style="width: XXXpx; height: YYYpx;" alt="" />

Example

[Gudlife]

For so far I know, best practices recomend placing js code at bottom of page and not within your html.

c.f. point 5:
http://net.tutsplus.com/tutorials/ja...for-beginners/

[Oppression]

thanks a ton you guys!

i hope one day i can help others with their problems too. its been way too long since i did any scripting / coding etc

i highly would recomend these forums.. everyone seems so patient and helpful, i love it.

[Oppression]

i tried the jqueury script

it gave me a 'to help protect your security I.E has prevented scripts etc etc etc pop up' at the top..

i'd rather not use scripts id rather use css or html, as i heard many people will not activate the script. for security purposes. i need raw html. / css.

[Oppression]

<img src="image.jpg" width="32" height="33" name="test"
onmouseover="test.width='32';test.height='33';"
onmouseout="test.width='150';test.height='33';" />


simply changes the size..... i have 2 images 1 for reg 1 for hover (link)

[Oppression]

Simple:

<img src="image1.gif" onmouseover="this.src='image2.gif'" onmouseout="this.src='image1.gif'" style="width: XXXpx; height: YYYpx;" alt="" />

Example

this works!

[Major Payne]

If you just want CSS:

Basic image swap using CSS