Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Keep onmousedown state for button when viewing respective content

Status
Not open for further replies.

dblue07

Programmer
Oct 9, 2007
9
CA
Hi,

I am looking to figure out what I need to modify to get a script working for a HTML based website.
What I want to accomplish is to click on a menu button such as the Home button as seen below and keep the onmousedown state when viewing any content part of the home page. For example, if a login page branches off of the home page, the home button should still be active. Another example is if I am in the Contact page and click a side panel link called contact details that opens a new page, the contact menu button should still have the onmousedown image, until another main menu item is clicked.

<a href="index.htm"><img src="images/home_up.gif" alt="" border="0" onmousedown="src='images/home_down.gif'" onmouseover="src='images/home_over.gif'" onmouseout=
"src='images/home_up.gif'"></a>

There are 7 different menu options that reflect the same formatting as above.

I used thread216-1620 as a reference point, however, I am unsure why the code is not functioning.


I made some slight changes, but nothing seems to work...and not sure if the <body onload...> is correct.


Javascript:

var clicked;
var name;

image1= new Image();
image1.src = "images/home_up.gif";
image1x= new Image()
image1x.src = "images/home_up.gif";
image1on = new Image();
image1on.src = "images/home_over.gif";
image1clik = new Image();
image1clik.src = "images/home_down.gif";


function on(number)
{
if(clicked == number)
{
}
else
{
name = "image" + number
document[name].src = eval(name + "on.src");
}
}

function off(number)

if(clicked == number)
{
}
else
{
name = "image" + number
document[name].src = eval(name + ".src");
}
}

function clikfn(name)
{
document[name].src = eval(name + "clik.src");
}

HTML format for each menu item:

</html>

<body onload="click('image1')">

....

<span>
<a href="index.htm"><img src="images/home_up.gif" alt="" border="0" onmousedown="clicked=1; clickfn('image1');" onmouseover="on(1);" onmouseout="off(1);"></a></span>


If there is more info I can provide please don't hesitate.
Thanks to all who can assist in my blunder.

David B
 
For starters I don't see your "click" funtion. Also the way you decribed your page, does every link open a new window/tab?
If you never refresh the the page with links you can have your links highlighted the way you described, if not you may have to use cookies or a server side language to help.
 
Hi j4606,

Thanks for responding!

Not sure if the onbody click is supposed to be the same as the clickfn.

I have 7 image menu buttons at the top of the page, each point to a different page on the same domain, but a new browser window does not open.

Process scenario:

1. Go to URL, main homepage image menu button is highlighted in the onmousedown ("images/home_down.gif") state.
2. Click News image menu button on homepage, which takes you to the News.htm page. NOTE: Now the News image menu button is highlighted.
3. Select the Articles or Press Release side menu links.
Takes you to a subpage of the News Section, therefore, the News image menu button is still highlighted.

There will be cases where a link in certain sections like News maps to a link on say the Contact page. So pretty much the image representing the downstate for each main menu button has to stored in a variable it seems, so when certain links are selected it checks the main button state. So every link will be mapped to a certain downstate of the main menu buttons. Up states and Over states would still be required as well.

I wouldn't mind figuring out a way to simplify things, however, I need to find a method of implementation that I can start off with.

 
I would rather use one image and change the offset of the image..

eg. make it 4 times as high and set the position.

Image:
|-----|
| 1 |
|-----|
| 2 |
|-----|
| 3 |
|-----|
| 4 |
|-----|

So, what you know..
top:0px == image 1

This means you can set the top of the image, inside the div.. The div should be the area of one of the images.. eg in this case 1/1 of the width and 1/4 of the height of the image.

You then can change this through CSS.
keeping the viewstate for page-refresh will be a tricky one, but here you can do it with some sort of simple JS which can validate if the page is active and if so, move the image up or down pixels..

I have used this in many css-only designs and the good thing is that there is no load-time when it changes the image, as all viewstates are inside the same image :)

Olav Alexander Mjelde
Admin & Webmaster
 
I dont have an option of changing the image rollover states as they are overlapping a header image of certain proportions.
 
DaButcher, any other ideas how I can achieve having the image button down state to stay active when viewing site content for that button topic while still maintaining up and over states for the other menu buttons?

Thanks for taking the time to respond
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top