Client side interactivity
I have an image map with 6 different cars(hotspots) on it.
I have 6 different html files that hold information about the cars.
I need each hotspot to link to the corresponding car html file onMouseOver, but i want to view the imagemap and the details togather on the same page. I have kept the details separate, because theirs a lot of information about the cars, e.g price, history , year sold. I
I have placed my code below. i am currently only trying to do this for car6, then when it works i will do for all cars.
I am a beginner , so plz be easy
<head>
<script language="JavaScript">
function getCar() {
c = document.getElementById("details");
car "car1.html";
c.innerHTML= car document.getElementById("car6info").value;
// i am trying to retrieve the car info and put them in the innerHTML of "details" tag.
}
function clear() {
a = document.getElementById("details");
a.innerHTML = "blank";
}
</script>
</head>
<link href="estate.css" rel="stylesheet" type="text/css"> <body>
<img src="canterbury.gif" border="0" usemap="#Map">
<map name="Map">
<area shape="circle" coords="226,68,12" href="#" name="car1">
<area shape="circle" coords="121,87,12" href="#" name="car2">
<area shape="circle" coords="156,145,11" href="#" name="car3">
<area shape="circle" coords="288,105,11" href="#" name="car4">
<area shape="circle" coords="322,185,11" href="#" name="car5">
<area shape="circle" coords="392,371,11" href="#" id="car6" name="car6" onMouseOver="getCar()" onMouseOut="clear()">
</map>
<br />
<p id="details"></p>
</body>
I have an image map with 6 different cars(hotspots) on it.
I have 6 different html files that hold information about the cars.
I need each hotspot to link to the corresponding car html file onMouseOver, but i want to view the imagemap and the details togather on the same page. I have kept the details separate, because theirs a lot of information about the cars, e.g price, history , year sold. I
I have placed my code below. i am currently only trying to do this for car6, then when it works i will do for all cars.
I am a beginner , so plz be easy
<head>
<script language="JavaScript">
function getCar() {
c = document.getElementById("details");
car "car1.html";
c.innerHTML= car document.getElementById("car6info").value;
// i am trying to retrieve the car info and put them in the innerHTML of "details" tag.
}
function clear() {
a = document.getElementById("details");
a.innerHTML = "blank";
}
</script>
</head>
<link href="estate.css" rel="stylesheet" type="text/css"> <body>
<img src="canterbury.gif" border="0" usemap="#Map">
<map name="Map">
<area shape="circle" coords="226,68,12" href="#" name="car1">
<area shape="circle" coords="121,87,12" href="#" name="car2">
<area shape="circle" coords="156,145,11" href="#" name="car3">
<area shape="circle" coords="288,105,11" href="#" name="car4">
<area shape="circle" coords="322,185,11" href="#" name="car5">
<area shape="circle" coords="392,371,11" href="#" id="car6" name="car6" onMouseOver="getCar()" onMouseOut="clear()">
</map>
<br />
<p id="details"></p>
</body>