using html to 'mouseover' images - Printable Version
-Shoutbox (https://shoutbox.menthix.net)
+-- Forum: MsgHelp Archive (/forumdisplay.php?fid=58)
+--- Forum: Skype & Technology (/forumdisplay.php?fid=9)
+---- Forum: Tech Talk (/forumdisplay.php?fid=17)
+----- Thread: using html to 'mouseover' images (/showthread.php?tid=53056)
using html to 'mouseover' images by stoshrocket on 11-17-2005 at 09:27 PM
is there any html code i could use to do a 'mouseover' on an image thats going to be a link? i have only heard of js that does this and dont want to learn that just yet, anyone know of any quick fixes???
RE: using html to 'mouseover' images by Dempsey on 11-17-2005 at 09:31 PM
It's not possible using HTML alone, you have to also use JavaScript or CSS. Here is an example using JavaScript that I use on MPSounds.net:
code:
<img name="search" src="images/search.gif" alt="Search SoundPacks" onmouseover="document.search.src='images/search2.gif'" onmouseout="document.search.src='images/search.gif'" border="0"></a>
RE: using html to 'mouseover' images by stoshrocket on 11-17-2005 at 09:34 PM
hmm.... is that all i need instead of the html or do i need some stuff in the head as well??
RE: using html to 'mouseover' images by Dempsey on 11-17-2005 at 09:37 PM
thats it, although you could have some javascript in the head tag to preload the rollover images.
RE: using html to 'mouseover' images by stoshrocket on 11-17-2005 at 09:39 PM
ok, but what do i do about the areas in bold...
code:
<img name="search" src="images/search.gif" alt="Search SoundPacks" onmouseover="document.search.src='images/search2.gif'" onmouseout="document.search.src='images/search.gif'" border="0"></a>
what do i do about those? do they apply to anything??
RE: using html to 'mouseover' images by hmaster on 11-17-2005 at 09:41 PM
Yeh to preload it do something like:
code:
<head>
<script language="JavaScript">
<!--
image1 = new Image();
image1.src = "images/image1.png";
image2 = new Image();
image2.src = "images/image2.png";
//-->
</script>
<style>
</head>
and the html
code:
<a href="page1.html" onmouseover="image1.src='images/image1.png;"
onmouseout="image1.src='images/image1.png;">
<img name="image1" src="images/image1.png" border=0></a>
<a href="page2.html" onmouseover="image2.src='images/image2.png';"
onmouseout="image2.src='images/image2.png;">
<img name="image2" src="images/image1.png" border=0></a>
RE: using html to 'mouseover' images by stoshrocket on 11-17-2005 at 09:42 PM
aaaahhhh... cheers you two!! 
RE: using html to 'mouseover' images by saralk on 11-17-2005 at 09:42 PM
well if you are going to have multiple images that rolling over, then you need to change it accordingly, so where is says "search" it would say something else
RE: using html to 'mouseover' images by hmaster on 11-17-2005 at 09:43 PM
but you dont need the name="whatever"
RE: using html to 'mouseover' images by stoshrocket on 11-17-2005 at 10:16 PM
hmm.... i've juts been doing this and i cant seem to get it to work, heres the code i have in so far:
-under the head tag
code:
<script language="JavaScript">
<!--
image1 = new Image();
image1.src = "images/graphics-over.png";
//-->
</script>
-and under the body tag
code:
<a href="graphics.html" onmouseover="image1.src='images/graphics-over.png';"
onmouseout="image1.src='images/graphics.png;">
<img src="images/graphics.png" border=0></a>
anyone see why its not working? thanks!
edit
sorted, seems i did need the 'name whatever' hehe, thanks anyway!
RE: using html to 'mouseover' images by Ezra on 11-17-2005 at 11:53 PM
Yeah, you need the name or else the piece of Javascript won't know what to change 
RE: using html to 'mouseover' images by Eljay on 11-18-2005 at 05:07 PM
quote:
Originally posted by Ezra
Yeah, you need the name or else the piece of Javascript won't know what to change
you could do this:
code:
<img src="blah.gif" onmouseover="this.src='blah.jpg';">
RE: using html to 'mouseover' images by M73A on 11-18-2005 at 05:16 PM
use the create navbar thing in dreamweaver.... save the hassle
or there is the rollover image thing... but hey, do what ya want... loadsa people hate dreamweaver
RE: using html to 'mouseover' images by Concord Dawn on 11-18-2005 at 05:17 PM
quote:
Originally posted by Lee Jeffery
quote:
Originally posted by Ezra
Yeah, you need the name or else the piece of Javascript won't know what to change
you could do this:
code:
<img src="blah.gif" onmouseover="this.src='blah.jpg';">
IE doesn't support that properly.
RE: using html to 'mouseover' images by Plik on 11-18-2005 at 07:33 PM
code:
<a href="msn.html" onmouseover="image4.src='images/msn-over.png';"
onmouseout="image4.src='images/msn.png';">
<img name="image4" src="images/msn.png" border=0></a>
</div>
You had the ; inside the single quotes. Which ment it was looking for images/msn.png;
RE: using html to 'mouseover' images by stoshrocket on 11-18-2005 at 08:14 PM
quote:
code: <a href="msn.html" onmouseover="image4.src='images/msn-over.png';"
onmouseout="image4.src='images/msn.png';">
<img name="image4" src="images/msn.png" border=0></a>
</div>
You had the ; inside the single quotes. Which ment it was looking for images/msn.png;
yeah, sorted thanks mate, now for another idea...
ok, uploaded. Go to this page
it uses the js, so i dont know if it'll work in IE, but that isnt the problem. Have a look on the page and mouse over the navi bar at the top and the icons in the middle, after they englarge, what happens???? they disappear, why!?!?
ok sorted, can someone tell me whats up with the page please?
RE: using html to 'mouseover' images by hmaster on 11-18-2005 at 08:56 PM
change:
onmouseout="image1.src='images/graphics.png;'"
to:
onmouseout="image1.src='images/graphics.png';"
the same error on every image..
you can see the comp help one doesnt disappear beause you missed the ; out altogether
RE: using html to 'mouseover' images by stoshrocket on 11-18-2005 at 09:04 PM
whoops.... hahaha, thank-you!
Anyway, that wasnt supposed to be the problem originally, what i originally wanted was i wanted to know whether i could adjust the code so that the whole set of icons in the middle are placed slightly lower (ie when you mouse over the icons it sets them lower, that height) so that when you mouse over the other icons stay as they are and only the moused over icon would move, and that would be larger. 
Anyone know of a way i can do this??? 
RE: using html to 'mouseover' images by hmaster on 11-18-2005 at 09:07 PM
lol The hover images should work in IE too now..
Your design looks like a mix of absorbations and shrbr's site !
and your second design page image links to msn 
RE: using html to 'mouseover' images by stoshrocket on 11-18-2005 at 09:10 PM
lol, i havent seen shrbr's site, ill have a look now, the original design wasnt supposed to be but this thread was originally about making my owne icons, but 'thats too advanced' so i had to use absorbtions 
hahaha, can you look at the problem above please...
RE: using html to 'mouseover' images by hmaster on 11-18-2005 at 09:28 PM
only thing i can think of is by giving more space around the image so it doesnt seem to move..
RE: using html to 'mouseover' images by stoshrocket on 11-18-2005 at 09:31 PM
but how would i do that, all i can think of is either <br />'s or adding a bigger margin/padding, and i dont think they will work, thye wil just shift the image down...
RE: using html to 'mouseover' images by hmaster on 11-18-2005 at 09:40 PM
dont think so, it will always move, unless the images were the same size..
RE: using html to 'mouseover' images by stoshrocket on 11-18-2005 at 09:51 PM
ah well, ive scoured the internet for an answer and found nothing, no matter, ive just resized the images to the same size, which i think looks better.... well, thanks for all the help! bear with me, i have an idea, one sec...
i have the solution! it involves no change of code really, all you have to do it take the original logos, size thre background up and put the logos in the corresponding corners, so you have a 75px logo in the bottom right of a 120px square, then for the mouse over have the same sized background (120px) and then just size the logo up to around 100px, genius!
sorted, uploaded, link
RE: using html to 'mouseover' images by hmaster on 11-18-2005 at 10:06 PM
good idea
suggestion, put a border round the banner..
RE: RE: using html to 'mouseover' images by stoshrocket on 11-18-2005 at 10:07 PM
quote:
Originally posted by hmaster
good idea
thanks, and thank-you for all the help (everybody)
quote:
suggestion, put a border round the banner
good idea.... thank-yooo!!!