Log in

View Full Version : Image Mapping In A Rollover Image


DIYPARTYHIRE
01-02-2009, 06:36 PM
Hey

Ive created some map points on an image which makes another image apear on mouse over ... but in the image that appears i would like some map points, is this possible?

Thanks
Damo
Snookerman
01-02-2009, 06:58 PM
Yes, but it depends on the code you are using so:
Please post a link to the page on your site that contains the problematic script or attach your code so we can check it out.
DIYPARTYHIRE
01-02-2009, 07:07 PM
hey

at the moment nothing is uplaoded as its a new idea im playing with but the coding i have for it is


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="default2.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('Images/disco_menu.png','Images/Image1.png')">
<table></table>
<table summary="book list" class="books" cellspacing="0" cellpadding="0">
<tr>
<td><img src="Images/header_bg.png" width="1200" height="175" border="0" usemap="#Map"></td>
</tr>
<tr>
<td><img name="Target" src="Images/Image1.png" width="1200" height="30" alt=""></td>
</tr>
</table>

<map name="Map">
<area shape="rect" coords="56,140,136,164" href="#" onMouseOut="MM_swapImage('Target','','Images/Image1.png',1)">
<area shape="rect" coords="143,136,317,161" href="#" onMouseOver="MM_swapImage('Target','','Images/disco_menu.png',1)">
<area shape="rect" coords="320,138,531,163" href="#">
<area shape="rect" coords="535,140,686,162" href="#">
</map>
</body>
</html>


Table will be replaced .....

Thanks
DIYPARTYHIRE
01-03-2009, 09:18 AM
Hey

Just thought id let you know that ive got a basic one online now

Skools Out 24/7 (http://www.skoolsout247.co.uk)

Ta!
Snookerman
01-03-2009, 10:13 AM
Are you using image maps for your menu? There are a lot simpler and more effective ways you can do this with simple css. Take a look at the DD library.
DIYPARTYHIRE
01-03-2009, 10:43 AM
hey

yes and no ... it is starting out like a menu but will lead onto other things that i have in mind but the simple navigation menus wont do what i need them to ... ifyou could let me know if i can map onto these rollover images it would be great


thanks
jscheuer1
01-03-2009, 06:11 PM
The image tag must have a usemap attribute associated with a valid map set of area tags for it's image to have hot spots. If it does, the image displayed by that image tag will have those hot spots, regardless of what image it is, or how many times it is swapped. If you wanted to, you could even change the usemap attribute when you swap the images in order to get a different set of hot spots.
DIYPARTYHIRE
01-04-2009, 03:13 PM
cheers john ... but where about would i write that into the code?

could you give me an eample?


cheers

Damo
jscheuer1
01-04-2009, 03:41 PM
Well the usemap attribute is added to the image tag with the name of 'Target' in the usual manner, and you can create the map for it also in the usual way. Now the tricky part, say you want an alternate map for when you swap. If so make it too in the usual way, each map should have a unique name, then when it comes time to swap, for example:


onmouseover="MM_swapImage('Target','','Images/disco_menu.png',1);document.images['Target'].usemap = '#whatever';"

should work. If it does, it's preferable. However you may need:


document.images['Target'].setAttribute('usemap', '#whatever', 0);

You may use the same syntax to swap it back or to yet another existing map when and if desired.
DIYPARTYHIRE
01-05-2009, 02:45 AM
hey john ive tried what i think you meant but could you have a check for me please coz its not working


<area shape="rect" coords="62,99,166,123" href="main_disco.htm"onMouseOver="MM_swapImage('nav_bar','','Images/structure/disco_main.png',1)";document.images['nav'].usemap = '#map2';">

"nav" is the target image which will be changed and then im using "map2" for the secondanry hotspots is this code correct?
DIYPARTYHIRE
01-05-2009, 04:01 AM
onMouseOver="MM_swapImage('nav_bar','','Images/disco_menu.png',1);document.images['nav_bar'].usemap = '#map3';">

then within the div of the "nav_bar i have


<div id="nav">
<img src="Images/Image1.png" alt="" name="nav_bar" width="1200" height="30" border="0" >
<map name="#map3">
<area shape="rect" coords="-8,2,144,70" href="#">
</map>
</div>


head is about to explode lol
jscheuer1
01-05-2009, 02:07 PM
This:


onMouseOver="MM_swapImage('nav_bar','','Images/disco_menu.png',1);document.images['nav_bar'].usemap = '#map3';">

will need to be:


onmouseover="MM_swapImage('nav_bar','','Images/disco_menu.png',1);document.images['nav_bar'].setAttribute('usemap', '#map3', 0);">

This:


<map name="#map3">
<area shape="rect" coords="-8,2,144,70" href="#">
</map>

needs to be:


<map name="map3">
<area shape="rect" coords="-8,2,144,70" href="#">
</map>

tested and working in IE and FF.
DIYPARTYHIRE
01-05-2009, 05:44 PM
GENIUS!!!!!


Thanks so very very very very much, as you can see i was up till the early hours this morning trying to work it out lol.


Thanks again!