1
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_Subset1.jpg and Article1.jpg to create the effect. However, Background_Subset1.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
Expand|Select|Wrap|Line Numbers
- <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>
