mouseover change div and image

A

alex.kemsley

Dear all,
I am a very novice javascriper and have cobled this together from
various places. I didnt expect it to work but hopefully will give you
an idea of what i want to achive.
I need 5 links that when you mouseover it, it displays the corisponding
div and separate image. When you mouse out it goes back to the defult.
first link.
I hope you get the idea.
Please help as i will never mange this on my own
Many thanks
Alex Kemsley


<html>
<head>
<title></title>

<script type="text/javascript">
function doStuff(el) {
document.all.tubimage.src=el+".jpg";
document.getElementById.el.style.display="block";

el.onmouseout=function() {
document.all.tubimage.src="monaco.jpg";
document.getElementById.el.style.display="none";
}
}

</script>

</head>
<body>


<p>
<img src="monaco.jpg" alt="" id="tubimage" /></p>

<a onmouseover="doStuff(monaco)">Monaco</a><br />
<a onmouseover="doStuff(sttropez)">St Tropez</a> <br />
<a onmouseover="doStuff(barclona)"> Barcelona</a><br />
<a onmouseover="doStuff(milan)">Milan</a><br />
<a onmouseover="doStuff(prague)">Prague</a><br />
</p>


<div id="monaco" style="display:none">
monaco text
</div>
<div id="sttropez" style="display:none">
sttropez text
</div>
<div id="barcelona" style="display:none">
barclona text
</div>
<div id="milan" style="display:none">
milan text
</div>
<div id="prague" style="display:none">
prague text
</div>

</body>
</html>
 
P

Paul Davis

First, quote the values in the links.
change this:
<a onmouseover="doStuff(monaco)">Monaco</a><br />
to this:
<a onmouseover="doStuff('monaco')">Monaco</a><br />

Next, use getElementById as a method:
document.getElementById.el.style.display="block";
becomes:
document.getElementById(el).style.display="block";

Your el.mouseout is completely broken but, with good intentions. delete
that.

I'm going to recommend that you do the following:
make your links like this:
<a onmouseover="show('monaco')"
onmouseout="hide('monaco')">Monaco</a><br />
and use some js like this:
function show(name){
document.all.tubimage.src=name+".jpg";
document.getElementById(name).style.display="block";
}
function hide(name){
document.all.tubimage.src="monaco.jpg";
document.getElementById(name).style.display="none";
}

There are some better ways to do this but, it looks like you are still
getting started.
 
R

Randy Webb

Paul Davis said the following on 7/26/2006 2:35 PM:
First, quote the values in the links.
Click to expand...

No, first you quote what you are replying to.
change this:
<a onmouseover="doStuff(monaco)">Monaco</a><br />
to this:
<a onmouseover="doStuff('monaco')">Monaco</a><br />
Click to expand...

OK, not sure I agree but ok.
Next, use getElementById as a method:
Click to expand...

There is no other way to use it.....
document.getElementById.el.style.display="block";
becomes:
document.getElementById(el).style.display="block";

Your el.mouseout is completely broken but, with good intentions. delete
that.
I'm going to recommend that you do the following:
Don't.

make your links like this:
<a onmouseover="show('monaco')"
onmouseout="hide('monaco')">Monaco</a><br />
and use some js like this:
function show(name){
document.all.tubimage.src=name+".jpg";
Click to expand...

And then wonder why it only works in IE?

Besides, don't use document.all or gEBI to access an image, use the
Images collection:

document.images['tubimage'].src = name + ".jpg";
document.getElementById(name).style.display="block";
}
function hide(name){
document.all.tubimage.src="monaco.jpg";
Ditto.

document.getElementById(name).style.display="none";
}

There are some better ways to do this but,
Click to expand...

There are more better ways to do it than worse ways to do it than the
way you did it.
it looks like you are still getting started.
Click to expand...

Then now is the time to teach good habits, not to say "You are just
getting started so here are some bad habits for you.
 
A

~A!

Randy said:
Paul Davis said the following on 7/26/2006 2:35 PM:
First, quote the values in the links.
Click to expand...

No, first you quote what you are replying to.
change this:
<a onmouseover="doStuff(monaco)">Monaco</a><br />
to this:
<a onmouseover="doStuff('monaco')">Monaco</a><br />
Click to expand...

OK, not sure I agree but ok.
Next, use getElementById as a method:
Click to expand...

There is no other way to use it.....
document.getElementById.el.style.display="block";
becomes:
document.getElementById(el).style.display="block";

Your el.mouseout is completely broken but, with good intentions. delete
that.
I'm going to recommend that you do the following:
Don't.

make your links like this:
<a onmouseover="show('monaco')"
onmouseout="hide('monaco')">Monaco</a><br />
and use some js like this:
function show(name){
document.all.tubimage.src=name+".jpg";
Click to expand...

And then wonder why it only works in IE?

Besides, don't use document.all or gEBI to access an image, use the
Images collection:

document.images['tubimage'].src = name + ".jpg";
document.getElementById(name).style.display="block";
}
function hide(name){
document.all.tubimage.src="monaco.jpg";
Ditto.

document.getElementById(name).style.display="none";
}

There are some better ways to do this but,
Click to expand...

There are more better ways to do it than worse ways to do it than the
way you did it.
it looks like you are still getting started.
Click to expand...

Then now is the time to teach good habits, not to say "You are just
getting started so here are some bad habits for you.
Click to expand...


Well, that was nasty for no good reason. Nice ta meetcha.

~A!
 
P

Paul

Since I am a bad person:

var toggleDivs = (function() {
return {
show : function(anchorRef,elemId) {
document.getElementById("tubimage").src= elemId+".jpg";
document.getElementById(elemId).style.display = "block";
anchorRef["elemId"] = elemId;
anchorRef.onmouseout = toggleDivs.hide;

},
hide : function() {
document.getElementById("tubimage").src = "monaco.jpg";
document.getElementById(this["elemId"]).style.display = "none";
}
};
})();
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
<a onmouseover="toggleDivs.show(this,'monaco')" href="#">Monaco</a><br
/>
<a onmouseover="toggleDivs.show(this,'sttropez')" href="#">St
Tropez</a><br />
<a onmouseover="toggleDivs.show(this,'barcelona')"
href="#">Barcelona</a><br />
<a onmouseover="toggleDivs.show(this,'milan')" href="#">Milan</a><br />
<a onmouseover="toggleDivs.show(this,'prague')" href="#">Prague</a><br
/>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

<div> help 1
Clickable Div Block 1
Image shifts to the right when export the page to pdf 4
Background image not showing up on html page 3
Help with code 0
Help with Visual Lightbox: Scripts 2
How to save JSON Data to a file using fetch() api? 2
Stuck with html and css 25

Members online

Total: 47 (members: 3, guests: 44)
Robots: 192

Forum statistics

Threads
473,764
Messages
2,569,564
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top