mouseover change div and image

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>

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.

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

Quote:

First, quote the values in the links.

No, first you quote what you are replying to.

Quote:

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.

Quote:

Next, use getElementById as a method:

There is no other way to use it.....

Quote:

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.

Quote:

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

Quote:

document.getElementById(name).style.display="block ";
}
function hide(name){
document.all.tubimage.src="monaco.jpg";

Ditto.

Quote:

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.

Quote:

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.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

Randy Webb wrote:

Quote:

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

Quote:

First, quote the values in the links.

>
No, first you quote what you are replying to.
>

Quote:

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

Quote:

Next, use getElementById as a method:

>
There is no other way to use it.....
>

Quote:

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

Quote:

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

Quote:

document.getElementById(name).style.display="block ";
}
function hide(name){
document.all.tubimage.src="monaco.jpg";

>
Ditto.
>

Quote:

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

Quote:

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.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

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

~A!

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

mouseover change div and image

re: mouseover change div and image

re: mouseover change div and image

re: mouseover change div and image

re: mouseover change div and image

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about