rollovers - Forums - CreateBlog

rollovers

ryanoman View Profile View Subprofile	Dec 15 2005, 01:47 PM Post #1
=] Group: Member Posts: 712 Joined: May 2004 Member No: 15,626	Is it still possible to create a rollover effect for a certain part of an image? For example, I'd like to rollover effects to the buttons of the navigation part of this layout: http://www.ryanoman.net/nwq/nwq.php Is it possible? I still have the .PSD.
[Up]	[Quote]

Replies

Libertie	Dec 15 2005, 03:25 PM Post #2
Guest	Yes. I'll give you an example.. Say I use this image as my navigation bar: And I want each individual portion of the image to be a link that turns light blue when I hover over it. I'll use this image for that: So basically, you make ALL the rollovers in just one image. So. Now the code. <!-- begin code provided by createblog.com --><br /><html><br /><head><br /></head><br /><br /><script><br />function initMaps() {<br /> if (document.getElementById) {<br /> var mapIds = initMaps.arguments; <br /> var i, j, area, areas;<br /> for (i = 0; i < mapIds.length; i++) {<br /> areas = document.getElementById(mapIds[i]).getElementsByTagName("area");<br /><br /> for (j = 0; j < areas.length; j++) { <br /> area = areas[j];<br /> <br /> area.onmouseout = imgSwap;<br /> area.onmouseover = imgSwap;<br /> area.onmouseup = imgSwap;<br /> }<br /> }<br /> }<br />}<br /><!-- end code provided by createblog.com --> That code up there tells the browser basically that there will be an image swap when you hover over the image. It doesn't know how yet, just that it will happen. <!-- begin code provided by createblog.com --><br />function imgSwap(evt) {<br /> evt = (evt) ? evt : event; <br /> var elem = (evt.target) ? evt.target : evt.srcElement;<br /> var imgClass = elem.parentNode.name; <br /> var coords = elem.coords.split(",");<br /> var clipVal = "rect(" + coords[1] + "px " +<br /> coords[2] + "px " +<br /> coords[3] + "px " +<br /> coords[0] + "px)";<br /> var imgStyle;<br /> <br /> switch (evt.type) {<br /> case "mouseout" :<br /> document.getElementById(imgClass + "Over").style.visibility = "hidden";<br /> document.getElementById(imgClass + "Down").style.visibility = "hidden";<br /> break;<br /> case "mouseover" :<br /> imgStyle = document.getElementById(imgClass + "Over").style;<br /> imgStyle.clip = clipVal;<br /> imgStyle.visibility = "visible";<br /> break<br /> case "mouseup" :<br /> document.getElementById(imgClass + "Down").style.visibility = "hidden";<br /> if (elem.click) {<br /> elem.click();<br /> }<br /> break;<br /> }<br /> evt.cancelBubble = true;<br /> return false;<br />}<br /></script><br /><!-- end code provided by createblog.com --> So that was the actual image swap. Now you're finished with the scripting, so you need to actually position your image. To do this, you need to use absolute positioning to put your images on top of each other: <!-- begin code provided by createblog.com --><br /><div style="position:relative"><br /> <img id="menubarUp" src="nav1.gif" height="18" width="127" alt="menubar"<br /> border="0" style="position:absolute; top:0px; left:0px; <br /> visibility:visible" usemap="#menubar" /><br /> <img id="menubarOver" src="nav2.gif" height="18" width="127" alt="menubar"<br /> border="0" style="position:absolute; top:0px; left:0px; <br /> visibility:hidden" usemap="#menubar" /><br /></div><br /><!-- end code provided by createblog.com --> Change those values as needed, but notice that I defined an image map. That's what will tell the browser which part of the image to change and which part to leave alone, as well as making those parts links. So to finish it up: <!-- begin code provided by createblog.com --><br /><map id="menubarMap" name="menubar"><br /> <area shape=rect COORDS="2,2,34,16" href="link1.html" ><br /><area shape=rect COORDS="37,2,90,16" href="link2.html" ><br /><area shape=rect COORDS="91,2,126,17" href="link3.html" ><br /></MAP><br /><br /></map><br /><br /></html><br /><!-- end code provided by createblog.com --> Now, if you want to see a preview, here's my full code (with my occasional commentary), just save as an html file and upload it to see the full results: <!-- begin code provided by createblog.com --><br /><html><br /><head><br /></head><br /><br /><script><br /><!-- This code tells the browser to change the image when hovering --><br />function initMaps() {<br /> if (document.getElementById) {<br /> var mapIds = initMaps.arguments; <br /> var i, j, area, areas;<br /> for (i = 0; i < mapIds.length; i++) {<br /> areas = document.getElementById(mapIds[i]).getElementsByTagName("area");<br /><br /> for (j = 0; j < areas.length; j++) { <br /> area = areas[j];<br /> <br /> area.onmouseout = imgSwap;<br /> area.onmouseover = imgSwap;<br /> area.onmouseup = imgSwap;<br /> }<br /> }<br /> }<br />}<br /><br /><!-- The actual image swap --><br />function imgSwap(evt) {<br /> evt = (evt) ? evt : event; <br /> var elem = (evt.target) ? evt.target : evt.srcElement;<br /> var imgClass = elem.parentNode.name; <br /> var coords = elem.coords.split(",");<br /> var clipVal = "rect(" + coords[1] + "px " +<br /> coords[2] + "px " +<br /> coords[3] + "px " +<br /> coords[0] + "px)";<br /> var imgStyle;<br /> <br /> switch (evt.type) {<br /> case "mouseout" :<br /> document.getElementById(imgClass + "Over").style.visibility = "hidden";<br /> document.getElementById(imgClass + "Down").style.visibility = "hidden";<br /> break;<br /> case "mouseover" :<br /> imgStyle = document.getElementById(imgClass + "Over").style;<br /> imgStyle.clip = clipVal;<br /> imgStyle.visibility = "visible";<br /> break<br /> case "mouseup" :<br /> document.getElementById(imgClass + "Down").style.visibility = "hidden";<br /> // guarantee click in IE<br /> if (elem.click) {<br /> elem.click();<br /> }<br /> break;<br /> }<br /> evt.cancelBubble = true;<br /> return false;<br />}<br /></script><br /><br /><body onload="initMaps('menubarMap')"><br /><br /><!-- Here we position the two images on top of each other: make sure the top and left values are the same for both images. --><br /><div style="position:relative"><br /> <img id="menubarUp" src="http://img.photobucket.com/albums/0903/Libertie/nav1.gif" height="18" width="127" alt="menubar"<br /> border="0" style="position:absolute; top:0px; left:0px; <br /> visibility:visible" usemap="#menubar" /><br /> <img id="menubarOver" src="http://img.photobucket.com/albums/0903/Libertie/nav2.gif" height="18" width="127" alt="menubar"<br /> border="0" style="position:absolute; top:0px; left:0px; <br /> visibility:hidden" usemap="#menubar" /><br /></div><br /><br /><!-- The image map --><br /><map id="menubarMap" name="menubar"><br /> <area shape=rect COORDS="2,2,34,16" href="link1.html" ><br /><area shape=rect COORDS="37,2,90,16" href="link2.html" ><br /><area shape=rect COORDS="91,2,126,17" href="link3.html" ><br /></MAP><br /><br /></map><br /><br /></html><br /><!-- end code provided by createblog.com -->
[Up]	[Quote]

Posts in this topic

ryanoman rollovers Dec 15 2005, 01:47 PM

Libertie Yes. I'll give you an example.. Say I use th... Dec 15 2005, 03:25 PM

Kristinaa Can you get the same effect if you wanted your lin... Dec 15 2005, 03:39 PM

ryanoman Thanks libertie! I wish I had seen this before... Dec 15 2005, 03:54 PM

Libertie Yup.. If the paper was one image, you could positi... Dec 15 2005, 04:00 PM

Kristinaa ^ Why polygons? But thanks for your help! I n... Dec 15 2005, 04:20 PM

Libertie Mm.. Well, the links are kind of at an angle so I ... Dec 15 2005, 04:45 PM

Kristinaa ^ oooh you make complete sense. I'm not thinki... Dec 15 2005, 05:05 PM

« Next Oldest · Graphics Help Resolved Topics · Next Newest »

1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)

0 Members: