PDA

View Full Version : Mouseover problems



BigDDunc
Apr 6th, 2006, 08:22 PM
Hi,

I have a script which has main elements to it such as A, B, C etc. When you click on a main element it will show a sub-menu of that element. e.g. the menu looks like:



A
B
C


If you clicked on A it would look like:


A
aa
ab
ac

B
C


The main elements are represented by 1 of 2 images. The 2 images are exactly the same except for their colour, one being green (the normal state) and the other being blue (the mouseover and selected state).

The state changes work fine except for one - The mouseover (turn the image from green to blue) and mouseout (turn the image back from blue to green) work, but when a main element is expanded I'd like it to remain blue then aswell (it returns back to green at present as soon as it has been clicked).

My Javascript code is here:




<script language="JavaScript">


function imgover(imgName, imgOver)
{
document.images[imgName].src=imgOver;
}


function imgout(imgName, imgOut)
{
document.images[imgName].src=imgOut;
}


//here you place the ids of every element you want.
var ids=new Array('a1','a2','a3','a4');

function switchid(id){
hideallids();
showdiv(id);
}

function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}

function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}

function showdiv(id) {
//safe function to show an element with a specified id

if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}
</script>



Here is my corresponding HTML:


<p><a href="javascript:switchid('a1');" onmouseover="imgover('homeimg', 'home_over.png');return false;" onmouseout="imgout('homeimg', 'home.png');return false;"><img src="home.png" id="homeimg"></a><br />

<div id='a1' style="display:none;">
<p>link1</p>
</div>

<a href="javascript:switchid('a2');"onmouseover="imgover('productsimg', 'products_over.png');return false;" onmouseout="imgout('productsimg', 'products.png');return false;"><img src="products.png" id="productsimg"></a><br />

<div id='a2' style="display:none;">
<p>more links</p>

</div>

<a href="javascript:switchid('a3');"onmouseover="imgover('retailimg', 'retail_over.png');return false;" onmouseout="imgout('retailimg', 'retail.png');return false;"><img src="retail.png" id="retailimg"></a><br />

<div id='a3' style="display:none;">
<p>bfgfgf</p>
</div>

<a href="javascript:switchid('a4');"onmouseover="imgover('commercialimg', 'commercial_over.png');return false;" onmouseout="imgout('commercialimg', 'commercial.png');return false;"><img src="commercial.png" id="commercialimg"></a><br />

<div id='a4' style="display:none;">
<p>Sartre is</p>
</div>





I have the code uploaded to a public webpage which is found at:

http://www.meyersdesign.co.uk/dunc/sites/eafo/menu/test.html

This is my *main* problem I'd like to solve.

========================
This is not essential but if anyone could solve this then I'd also be extremely grateful:
========================

My menu when expanded will not shrink if you click the same element again.

E.g.

A
B
C

I click A:

A
aa
ab
ac
B
C

However if I click A again it stays the same instead of making the sub menu shrink again. However the menu must retain the function that when one item is clicked in the menu any previous items that are expanded shrink.

Here is the functionality im talking about:
http://www.meyersdesign.co.uk/dunc/sites/eafo/menu/index.html

But please ignore the way that it lets you have more then 1 main item expanded at once as this is NOT what I want.

The source code for this is here:




function nav(id)
{
if (document.all){

if(document.all[id].style.display == 'none'){

document.all[id].style.display = '';

} else {

document.all[id].style.display = 'none';

}

return false;

} else if (document.getElementById){

if(document.getElementById(id).style.display == 'none'){

document.getElementById(id).style.display = 'block';

} else {

document.getElementById(id).style.display = 'none';

}

return false;

}

}


function imgover(imgName, imgOver)
{
document.images[imgName].src=imgOver;
}


function imgout(imgName, imgOut)
{
document.images[imgName].src=imgOut;
}

function imgclick(imgLinks)
{
nav(imgLinks);
}


The HTML code is here:



<tr>
<td><a href="#" onmouseover="imgover('homeimg', 'home_over.png');return false;" onmouseout="imgout('homeimg', 'home.png');return false;" onclick="imgclick('homelinks'); return false;"><img src="home.png" border="0" name="homeimg"></a></td>
</tr>
<tr>
<td><p id="homelinks" class="menu" style="display: none">&nbsp;&nbsp;<img src="arrow.jpg" border="0">&nbsp;<a href="#"><font size=2 face="verdana" color="#FEFEFE">Link1</font></a><br>&nbsp;&nbsp;<img src="arrow.jpg" border="0">&nbsp;<a href="#"><font size=2 face="verdana" color="#FEFEFE">Link2</font></a><br>&nbsp;&nbsp;<img src="arrow.jpg" border="0"><br></td>
</tr>
*Please ignore the fact its in a table*
Anyone who can help with either problems I will be extremely gratefull too.

Duncan

thelinuxduck
Apr 6th, 2006, 09:25 PM
OK, as for the first issue..

So, the first thing that I would do is write a function that tells you whether the DIV is hidden or not. You've got one to show it, one to hide it, and now write one to return true/false, something like (untested):


function isHidden(id) {
var obj = false;
if (document.getElementById) {
obj = document.getElementById(id).style;
}
else if (document.layers) {
obj = document.id;
}
else if(document.all) {
obj = document.all.id.style;
}

if(obj) {
if(obj.display == 'none') { return true; }
}

return false;
}


Next, change the mouseover and mouseout functions so that they pass in the name of the element that they support (show/hide - a1, a2, etc), as well as both img's (over and out), something like:


function imgover(imgName, imgOver, imgOut, elementID);
function imgout(imgName, imgOver, imgOut, elementID);


We'll assume that if the element is closed, you want the img to be green, unless it is moused over, in which case it will be blue. And we'll also assume that if the element is open, you want the img to be blue, unless it is moused over, in which case, it will be green. That way, an open element will change to blue to tell you you can close it.

So, let's rewrite the mouseover function to test whether the element is open or not. If it is, then show green, if not, show blue:


function imgover(imgName, imgOver, imgOut, elementID)
{
document.images[imgName].src=(isHidden(elementID) ? imgOver : imgOut);
}


Then, do the reverse for the imgout. If the element is hidden, show imgOut:


function imgout(imgName, imgOver, imgOut, elementID)
{
document.images[imgName].src=(isHidden(elementID) ? imgOut : imgOver);
}


That should take care of the first issue. Note that I haven't tested any of this code, so it may require some tweaking to get it working, but this should be the way to handle it.

Btw, you could also make imgOver and imgOut global variable, and then you'd not have to pass them into the function.

HTH

TLD