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
CSS Codes
Junior Coders
Image Mapping In A Rollover Image
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
Who ya gonna call?
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.
Junior Coders
hey
at the moment nothing is uplaoded as its a new idea im playing with but the coding i have for it is
Table will be replaced .....<!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>
Thanks
Junior Coders
Online Now
Hey
Just thought id let you know that ive got a basic one online now
Skools Out 24/7
Ta!
Who ya gonna call?
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.
Junior Coders
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
Global Moderator
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.
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
Junior Coders
cheers john ... but where about would i write that into the code?
could you give me an eample?
cheers
Damo
Global Moderator
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:
should work. If it does, it's preferable. However you may need:Code:onmouseover="MM_swapImage('Target','','Images/disco_menu.png',1);document.images['Target'].usemap = '#whatever';"
You may use the same syntax to swap it back or to yet another existing map when and if desired.Code:document.images['Target'].setAttribute('usemap', '#whatever', 0);
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
Junior Coders
hey john ive tried what i think you meant but could you have a check for me please coz its not working
"nav" is the target image which will be changed and then im using "map2" for the secondanry hotspots is this code correct?<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';">
Posting Permissions
Reply With Quote
Bookmarks