Why doesnt IE like this javascript?

Mister_Pister · 3 Feb 2006 at 17:17

location is on www.djtempest.co.uk

basically when you move your mouse over the buttons a small text description comes up underneath. It works fine in Firefox.

Code:

// Change Description
function changeDesc(desc){
	document.getElementById('description').innerHTML = desc;
}

// Change The Webpage
function navigation(url){
	frames['content'].location.href=url;
}

....

<img src="images/table_right_buttons_5.gif" alt="Dates" width="61" height="28" border="0" onClick="navigation('dates.php')"  onMouseOver="changeDesc('Dates')"></a>

Also just as a matter of interest what is it about the site thats making IE display its stupid security warning about active content? Is it the scripts im using or just the fact it has an iFrame? And is there a way around it?

toastyman · 3 Feb 2006 at 19:09

Instead of using Javascript to do the rollovers, why not use CSS?

Basically, use css to detect when the user is hovering over a button and hide the current div containing text and display another accordingly (display:none or display:block).

Its also guaranteed to work in both FF and IE

Mister_Pister · 3 Feb 2006 at 19:23

sounds good but I havent got a clue how to do it

toastyman · 3 Feb 2006 at 19:30

Ok so you have different divs for the text:

Code:

<div id="home">This goes to the homepage</div>
<div id="about">This goes to the about page</div>
<div id="contact">This goes to the contact page</div>

And to hide a div, use the CSS code display:none, to show a div use the code display:block.

So if you put your mouse over the home button,
(your css hover detection code goes here - try and work this out it'll help you learn

), then hide the about and contact divs, but show the home div.

Does that help? I don't want to give too much away else you won't learn!

Mister_Pister · 3 Feb 2006 at 19:47

yep i comprende the div hide and show bits. As for the detection I assume thats going to have to be javascript again?

toastyman · 3 Feb 2006 at 19:51

Nope...look into using CSS hover.

Mister_Pister · 3 Feb 2006 at 20:10

something like buttonName:hover { home:block }

?

toastyman · 3 Feb 2006 at 20:44

You're getting close...

You've got the ideas right...just work on the syntax.

Try looking on w3schools

Mister_Pister · 3 Feb 2006 at 20:54

can ya just tell me please mate, css is not my strong point and my head is baked..

Mister_Pister · 5 Feb 2006 at 16:34

ok update on this ive now got the divs set up with the descriptions and the following function which will show them when they put their mouse over the buttons

Code:

function toggleLayer(whichLayer){

if (document.getElementById){
	// this is the way the standards work
	var style2 = document.getElementById(whichLayer).style;
	style2.display = style2.display? "":"block";
	}
else if (document.all){
	// this is the way old msie versions work
	var style2 = document.all[whichLayer].style;
	style2.display = style2.display? "":"block";
}
else if (document.layers){
	// this is the way nn4 works
	var style2 = document.layers[whichLayer].style;
	style2.display = style2.display? "":"block";
	}
}

</script>

....

div#news
{
margin: 0px 20px 0px 20px;
display: none;
}
div#media
{
margin: 0px 20px 0px 20px;
display: none;
}
div#bio
{
margin: 0px 20px 0px 20px;
display: none;
}
div#dates
{
margin: 0px 20px 0px 20px;
display: none;
}
div#contact
{
margin: 0px 20px 0px 20px;
display: none;
}

What i need to know is how to hide the current div thats showing before showing the next because currently its just showing them all one by one. see www.djtempest.co.uk for example of what i mean..