/    Sign up×
Community /Pin to ProfileBookmark

Looking for code: img that changes img on mouseover

Copy linkTweet thisAlerts:
Aug 09.2012

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?

to post a comment
HTML

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@GudlifeAug 09.2012 — 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>
Copy linkTweet thisAlerts:
@GudlifeAug 09.2012 — ...
Copy linkTweet thisAlerts:
@srajeshAug 09.2012 — 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?[/QUOTE]
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';" />
Copy linkTweet thisAlerts:
@OppressionauthorAug 09.2012 — that makes sense.

and thanks!

I will try that!
Copy linkTweet thisAlerts:
@Major_PayneAug 09.2012 — Simple:

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

Example
Copy linkTweet thisAlerts:
@GudlifeAug 09.2012 — 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/javascript-ajax/24-javascript-best-practices-for-beginners/
Copy linkTweet thisAlerts:
@OppressionauthorAug 09.2012 — 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.
Copy linkTweet thisAlerts:
@OppressionauthorAug 09.2012 — 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.
Copy linkTweet thisAlerts:
@OppressionauthorAug 09.2012 — <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)
Copy linkTweet thisAlerts:
@OppressionauthorAug 09.2012 — Simple:

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

Example[/QUOTE]

this works! ?
Copy linkTweet thisAlerts:
@Major_PayneAug 09.2012 — If you just want CSS:

Basic image swap using CSS
×

Success!

Help @Oppression spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...