470,630 Members | 2,043 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,630 developers. It's quick & easy.

Javascript vs. other technology

Hello,

I was looking for a general group to post this in, so I could do a
compare/contrast of possible implementations, but unfortunately I'm
really a newbie and don't even know what my options are. Please
forgive my ignorance.

I have two questions:

1) Essentially, I want to have a main image on my page that changes
based on mouseover events from a large number of smaller images
scattered around the page. In the past I used rollovers in a brute
force kind of way, a different function for each "hot spot". However,
this time I have upwards of forty hot spots, and I need
focused/non-focused images for each of them, and a slew of pictures for
the main image to use in turn. Maybe there's a really simple way to do
this cleanly using loops, or wildcards (assuming all filenames are like
"rolloverXX.jpg", or something that changes with a number).

2) If possible, I'd like to play an audio file that changes with the
mouseovers, and periodically. Is there anyway to do this without
flash? Do browsers natively support AIFF or MP3 playback that can be
triggered like this, or is basically the only way to do this with Flash
(I have never used it, unfortunately)?

Anyway, if anyone could suggest to me how to implement 1) elegantly,
and if 2) is possible, I would be much obliged. Also, I know this is a
Javascript forum, but if there is a better language/API to be doing
this, if you could suggest it I would be grateful.

Thank you for any help you can provide.

Dec 8 '06 #1
2 1208
Lee
HeroOfSpielburg said:
>
Hello,

I was looking for a general group to post this in, so I could do a
compare/contrast of possible implementations, but unfortunately I'm
really a newbie and don't even know what my options are. Please
forgive my ignorance.

I have two questions:

1) Essentially, I want to have a main image on my page that changes
based on mouseover events from a large number of smaller images
scattered around the page. In the past I used rollovers in a brute
force kind of way, a different function for each "hot spot". However,
this time I have upwards of forty hot spots, and I need
focused/non-focused images for each of them, and a slew of pictures for
the main image to use in turn. Maybe there's a really simple way to do
this cleanly using loops, or wildcards (assuming all filenames are like
"rolloverXX.jpg", or something that changes with a number).<html>
I won't help anyone add music to a web site, but here's one
possible solution to part 1:

<head>
<title>demo</title>
<script type="text/javascript">
timer=0;
function cancel() {
if(timer) {
clearTimeout(timer);
}
}
function over(img) {
cancel();
document.getElementById("canvas").src=img.src.toSt ring().replace("6464",
"256256");
}
function out() {
timer=setTimeout("document.getElementById('canvas' ).src="
+"'http://www.azphx.com/dhtml/tmp/redt.gif'",50);
}
</script>
</head>
<body>
<img width="64" height="64" src="http://www.azphx.com/dhtml/tmp/alpha6464.jpg"
onmouseover="over(this)" onmouseout="out()">
<img width="64" height="64" src="http://www.azphx.com/dhtml/tmp/beta6464.jpg"
onmouseover="over(this)" onmouseout="out()">
<img width="64" height="64" src="http://www.azphx.com/dhtml/tmp/gamma6464.jpg"
onmouseover="over(this)" onmouseout="out()">
<img width="64" height="64" src="http://www.azphx.com/dhtml/tmp/delta6464.jpg"
onmouseover="over(this)" onmouseout="out()">
<img width="64" height="64" src="http://www.azphx.com/dhtml/tmp/alpha6464.jpg"
onmouseover="over(this)" onmouseout="out()">
<img width="64" height="64" src="http://www.azphx.com/dhtml/tmp/beta6464.jpg"
onmouseover="over(this)" onmouseout="out()">
<img width="64" height="64" src="http://www.azphx.com/dhtml/tmp/gamma6464.jpg"
onmouseover="over(this)" onmouseout="out()">
<img width="64" height="64" src="http://www.azphx.com/dhtml/tmp/delta6464.jpg"
onmouseover="over(this)" onmouseout="out()">
<img width="64" height="64" src="http://www.azphx.com/dhtml/tmp/alpha6464.jpg"
onmouseover="over(this)" onmouseout="out()">
<img width="64" height="64" src="http://www.azphx.com/dhtml/tmp/beta6464.jpg"
onmouseover="over(this)" onmouseout="out()">
<img width="64" height="64" src="http://www.azphx.com/dhtml/tmp/gamma6464.jpg"
onmouseover="over(this)" onmouseout="out()">
<img width="64" height="64" src="http://www.azphx.com/dhtml/tmp/delta6464.jpg"
onmouseover="over(this)" onmouseout="out()">
<br>
<img id="canvas"
width="256" height="256"
src="http://www.azphx.com/dhtml/tmp/redt.gif"
onmouseover="cancel()">
</body>
</html>
--

Dec 8 '06 #2
HeroOfSpielburg wrote:
2) If possible, I'd like to play an audio file that changes with the
mouseovers, and periodically. Is there anyway to do this without
flash? Do browsers natively support AIFF or MP3 playback that can be
triggered like this, or is basically the only way to do this with Flash
(I have never used it, unfortunately)?
The example below works with a .wav file in many browsers

IE5, 5.5, 6 on Windows XP
Opera 9, Firefox 1.5, Safari 2 on OS X 10.4
Safari 1.3 and IE5.2 on OS X 10.3

Peter

--------------------------------

<html>
<head>
<title>sound test</title>
</head>
<body>

<a href="#" onclick="foo();return false;">challenge image here</a>
<div id="sound" style="height:0px;width:0px;"</div>

<script type="text/javascript">
function foo() {
document.getElementById("sound").innerHTML = '<embed
src="sound.wav" hidden="true" autostart="true" loop="false">';
}
</script>

</body>
</html>

Dec 8 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by Jay | last post: by
17 posts views Thread by Ian | last post: by
4 posts views Thread by Madhusudhanan Chandrasekaran | last post: by
136 posts views Thread by Matt Kruse | last post: by
7 posts views Thread by giangiammy | last post: by
69 posts views Thread by Peter Olcott | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.