Hi guys,
I created a code where there is a picture in the background (Background.jpg ) and once you pass your mouse over some predefined areas of the picture, the specific area changes to another picture (Article1.jpg) and a sound is played. On mouse out, it reverts to the original background
The code below works and the part which is underlined will eventually be copied 4-5 times to create 4-5 of those specific areas.
I have 2 questions:
1. as you will see, I am using Background_Subs et1.jpg and Article1.jpg to create the effect. However, Background_Subs et1.jpg is only a copy of part of "Backgound. jpg" and could potentially not be used. I assume I will need to create a transparent frame for Article1.jpg to display in onmouseover. Would someone know how to do this?
2. when I access the page, the first time that I hover above the area, the picture and the sound gets downloaded which results in some lag. It works fine afterwards. Is there a way to preload the sounds and images as soon as the page is opened?
Thanks
I created a code where there is a picture in the background (Background.jpg ) and once you pass your mouse over some predefined areas of the picture, the specific area changes to another picture (Article1.jpg) and a sound is played. On mouse out, it reverts to the original background
The code below works and the part which is underlined will eventually be copied 4-5 times to create 4-5 of those specific areas.
I have 2 questions:
1. as you will see, I am using Background_Subs et1.jpg and Article1.jpg to create the effect. However, Background_Subs et1.jpg is only a copy of part of "Backgound. jpg" and could potentially not be used. I assume I will need to create a transparent frame for Article1.jpg to display in onmouseover. Would someone know how to do this?
2. when I access the page, the first time that I hover above the area, the picture and the sound gets downloaded which results in some lag. It works fine afterwards. Is there a way to preload the sounds and images as soon as the page is opened?
Thanks
Code:
<html>
<head>
<script type="text/javascript">
function playSound(soundfile) {
document.getElementById('a1').innerHTML="<embed src='" +soundfile+ "' hidden='true' autostart='true' loop='false' />";
}
</script>
<script type="text/javascript">
function show_confirm(Article1)
{
var r=confirm("Do you want to buy the " + Article1 + " ?");
if (r==true)
{
alert("You rock!”);
}
}
</script>
</head>
<body>
<div style="position: absolute; left: 220px; top: 300px;">
<img src="Background.jpg"/>
</div>
<div style="position: absolute; left: 420px; top: 513px;">
<img src="Background_Subset1.jpg" width="100" height="120" alt="Area1"
onmouseover="playSound('Sound1.wav'); this.style.cursor='pointer'; this.src='PicOnMouseOver1.jpg';"
onmouseout="this.style.cursor='default';this.src='Background_Subset1.jpg';"
onclick="show_confirm('Article1')"
/>
</div>
<div>
<h1 id="a1"></h1>
</div>
<body>
<html>