mouseover change div and image

alex.kemsley · Jul 26, 2006

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>

Paul Davis · Jul 26, 2006

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.

Randy Webb · Jul 26, 2006

Paul Davis said the following on 7/26/2006 2:35 PM:

First, quote the values in the links.

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 />

OK, not sure I agree but ok.

Next, use getElementById as a method:

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";

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,

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.

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! · Jul 27, 2006

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.

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

~A!

Paul · Jul 27, 2006

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
/>

<div> help	1	Mar 4, 2024
Clickable Div Block	1	Oct 13, 2023
Image shifts to the right when export the page to pdf	4	May 5, 2023
Background image not showing up on html page	3	Sep 23, 2023
Help with code	0	Jun 12, 2022
Help with Visual Lightbox: Scripts	2	May 3, 2023
Final chapter of "Learn PHP, MySQL and JavaScript"	3	Jun 4, 2024
How to save JSON Data to a file using fetch() api?	2	Apr 28, 2022

mouseover change div and image

alex.kemsley

Paul Davis

Randy Webb

~A!

Paul

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads