Ik ben bezig met een website en daarbij heb ik besloten (althans dat is mn bedoeling) een menu in een plaatje te maken. Daarmee bedoel met een image map en bij behorende area's+coordinaten. Dit lukt mij allemaal aardig goed en weet zo een pagina te linken aan een stukje in mn plaatje. Echter wat me niet lukt is om dat gedeelte te laten oplichten (of ander plaatje erop) met een soort van onmouseover.
inmiddels heb ik op google het volgende script gevonden: (de code zit hier bij in mn site, en wat ik nodig denk te hebben voor het mouse over project staat in de head vanaf:scripttype tot aan eind van de head en de rest staat in de <div> onderaan mn pagina.)
met dit script krijg ik het voor elkaar om als ik met mn muis over het goede gedeelte ga hier een ander plaatje neer te zetten. zoals hier onder te zien is:
maar als ik hier vanaf ga dan blijft hij hier op (het vlakje blijft zwart terwijl ik met mn muist uit het vak ben)
bij het 2e vakje dat ik heb als area werkt het ook maar als ik daar uit ga word het 1e vakje zwart en niet alles weer blank zoals ik graag wil (zie hieronder):
wat kan ik hier aan doen en hoe werkt dat met die code, verder vraag ik me af of ik die hele code wel nodig ben en of er misschien ook een makkelijkere manier is.
hoop dat iemand me kan helpen, en mochten er vragen zijn over mn verhaal, vraag gerust want ik wil graag verder komen met dit.
alvast bedankt.
inmiddels heb ik op google het volgende script gevonden: (de code zit hier bij in mn site, en wat ik nodig denk te hebben voor het mouse over project staat in de head vanaf:scripttype tot aan eind van de head en de rest staat in de <div> onderaan mn pagina.)
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="stijl1.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="icon.gif"/>
<title> PO Website - Home </title>
<script type="text/javascript">
<!--
var maps=new Array();
maps[0]='button1.jpg';
maps[1]='button2.jpg';
maps[2]='apple2.jpg';
maps[3]='apple3.jpg';
maps[4]='apple4.jpg';
maps[5]='apple5.jpg';
window.onload=function() {
elem=document.getElementsByTagName('area');
for(c=0;c<elem.length;c++) {
elem[c].id='a'+c;
elem[c].onmouseover=function() {
document.getElementById('pic').src=maps[this.id.split('a')[1]];
}
elem[c].onmouseout=function() {
document.getElementById('pic').src=maps[0];
}
}
}
var preloads=[];
function preload(){
for(i=0;i<arguments.length;i++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[i];
}
}
preload('button1.jpg','button2.jpg','apple2.jpg','apple3.jpg','apple4.jpg','apple5.jpg');
//-->
</script>
</head>
<body bgcolor="#FFFFFF" >
<table bgcolor="FFFFFF" border="2" width="70%" cellspacing="20" cellpadding="5" align="center">
<tr>
<td width="50%" valign="top" align="center" colspan="2">
<div>
<img id="pic" src="banner.jpg" alt="" height="200" width="750" usemap="#knoppen" />
</div>
</td>
</tr>
<tr>
<td rowspan="2" width="10%" height="30%" valign="top">
</td>
</tr>
<tr>
<td>
TEKSTVAK
</td>
</tr>
</table>
<div>
<map name="knoppen">
<area shape="poly" coords="158,196,148,148,150,143,186,140,240,165,244,197" href="pagina1.html" alt="button1">
<area shape="poly" coords="250,196,245,164,286,114,328,143,314,197" href="pagina2.html" alt="button2">
</map>
</div>
</body>
</html>met dit script krijg ik het voor elkaar om als ik met mn muis over het goede gedeelte ga hier een ander plaatje neer te zetten. zoals hier onder te zien is:
maar als ik hier vanaf ga dan blijft hij hier op (het vlakje blijft zwart terwijl ik met mn muist uit het vak ben)
bij het 2e vakje dat ik heb als area werkt het ook maar als ik daar uit ga word het 1e vakje zwart en niet alles weer blank zoals ik graag wil (zie hieronder):
wat kan ik hier aan doen en hoe werkt dat met die code, verder vraag ik me af of ik die hele code wel nodig ben en of er misschien ook een makkelijkere manier is.
hoop dat iemand me kan helpen, en mochten er vragen zijn over mn verhaal, vraag gerust want ik wil graag verder komen met dit.
alvast bedankt.
