asked on

Rollover and Stay - is there such a script

I use a javascript at present which allows me to effect rollover or mouseover buttons - and it serves me well. However I'm looking for a script which will rollover but remain on the second image - is there such a beastie?

rajgn

Simple, DON'T write 'onmouseout' event. Only write 'onmouseover' event.

bigstar

ASKER

Your absolutely right RAJGN - that works but having tried it I realise its not what I wanted at all - sorry.

What I really want to do is this:

Imagine a navigation frame on the left and a main frame on the right of your screen. In the navigation frame the button would rollover in the normal way, but would 'stick' on the selected hyperlink until such time as you would select another button, then it would return to it's 'Off' state.

The only thing like it I've seen on the 'Net (can't remember where)is something similar but not the same, where you have a rollover button, but with a further image next to it which indicates which button has been pressed, and its this additional image which 'sticks' until you move to your next chosen button.

Hope this is clear and moreover, achievable! Let me know what you think.

rajgn

Yeah, my guess is correct!(I expected your requirement). Before discussing about it, I want to know what's your development platform, scripting language for CGI/ASP etc...

bigstar

ASKER

My development platform is Win95/98/NT using Notepad/FrontPage & Dreamweaver and destined for MSIE & Netscape V4. I'm scripting in JavaScript only on this particular project. These buttons I require are simply needed in the context of a frame to hyperlink to pages in a main frame.

Is my request acheivable in JavaScript only or is a combination of other languages needed?

Quixote

Here ya go. Don't quite know why rajgn was interested in your server-side abilities. Everything you need is in the JavaScript.

<html>

<script>


<body onLoad="preloadImages()">

<a href="bob.html"
onMouseOver="swapAllImages('bob');"><img name="bob" src="../images/rollovers/bob_off.gif"></a>
<a href="martha.html"
onMouseOver="swapAllImages('martha');"><img name="martha" src="../images/rollovers/martha_off.gif"></a>
<a href="jimbo.html"
onMouseOver="swapAllImages('jimbo');"><img name="jimbo" src="../images/rollovers/jimbo_off.gif"></a>
<a href="hortence.html"
onMouseOver="swapAllImages('hortence');"><img name="hortence" src="../images/rollovers/hortence_off.gif"></a>
<a href="sally.html"
onMouseOver="swapAllImages('sally');"><img name="sally" src="../images/rollovers/sally_off.gif"></a>

</body>
</html>

I tried to name everything so you can figure it out. This is actually pretty easy: every mouseover turns off all images except the one you moused over, which turns on.

Cheers.
-Quixote

rajgn

Quixote:

you're very fast to jump into conclusions. I say it by observing your understanding of 'bigstar's requirement. He want to 'stick' to the 'on' state of a CLICKED(he mean selected) hyperlink, at the same time enabling the events of other links UNTIL another link is clicked(Hope it's clear now).
Now comes the point of knowing server-side capabilities. This problem has two dimensions. Luckily, for bigstar's task we don't require server side scripting since he's keeping all his links in a seperate frame. If he want to keep track of a clicked link which is contained in the same document(which changes on the click), then you MUST remember it through server side scripting(since every time the link clicked, new page is displayed which know NOTHING about previous page).
Now it's time to turn over to BIGSTAR...

bigstar:

here's my code as per your requirements:

assuming there are three images add.gif,edit.gid,next.gif, chages to add_ON.gif,edit_ON.gif, next_ON.gif on mouse over. All hyperlinks I set to javascript:void(0). However, you change them to appropriate URL's(don't forget to set the target frame!)

<html>

<head>
<title>Sticky...</title>
<script LANGUAGE="JavaScript">
var clicked = "";
if (document.images)
{
      //var img = new Array('add','edit','next');
      var Add = new Image()
      Add.src='images/add.gif'
      var Add_ON = new Image()
      Add_ON.src='images/add_ON.gif'

      var edit = new Image()
      edit.src='images/edit.gif'
      var edit_ON = new Image()
      edit_ON.src='images/edit_ON.gif'

      var next = new Image()
      next.src='images/next.gif'
      var next_ON = new Image()
      next_ON.src='images/next_ON.gif'

}

function changeTo(imgName)
{
      if(document.images) {
            document.images[imgName].src = "images/"+imgName+"_ON.gif";
      }
}

function changeBack(imgName)
{
      if(document.images) {
            if(imgName != clicked) {
            document.images[imgName].src = "images/"+imgName+".gif"; }
      }
}
function setVar(varName)
{
      clicked = varName;
      var i;
      for(i=0;i<document.images.length;i++)
      {
            var imgName = document.images[i].src;
            if(document.images[i].name != clicked) {
                  if(imgName.substring(imgName.length-7) == "_ON.gif") { document.images[i].src = imgName.substring(0,imgName.length-7)+".gif"; }
            }
      }
}
</script>
</head>

<body>

<p><a href="javascript:void(0)" onmouseover="changeTo('add')"
onmouseout="changeBack('add')" onclick="setVar('add')"><img src="images/add.gif"
name="add" border="0" width="71" height="21"></a>    <a
href="javascript:void(0)" onmouseover="changeTo('edit')" onmouseout="changeBack('edit')"
onclick="setVar('edit')"><img src="images/edit.gif" border="0" width="71" height="21"
name="edit"></a>   <a href="javascript:void(0)" onmouseover="changeTo('next')"
onmouseout="changeBack('next')" onclick="setVar('next')"><img src="images/next.gif"
border="0" width="101" height="21" name="next"></a></p>
</body>
</html>

hope this is what you're looking for.

Quixote

rajgn-

I think you're completely right. I read bigstar's request for a "rollover in the normal way" to mean onmouseover, instead of concentrating on what he said next -- that he wanted the selected one to stick.

Bigstar-

Rajgn's answer is more in tune with what we think you want (which, I admit, may be wrong). Please reject my answer unless it works exactly as you wished, and try his. I think you'll have more success with it. My apologies for the mis-read -- that's what I get for trying to do this at midnight....

Cheers.
-Quixote

PS: instead of any server-side scripting, I'd say use a javascript cookie. Of course, neither is needed, since the frame is not reloaded, and if it weren't in a frame then you could hard code the page to know which one to keep sticky...

bigstar

ASKER

Quixote - Thanks for doing the honourable thing - your script is more the traditional rollover. However many thanks for your contribution - and I look forward to your assitance with my other JavaScript problems in the future.

Rajgn - Haven't tried your script yet but will do so shortly - I'll get back to you here. Cheers

cheekycj

Just a quick note- from what it looks like - I didn't completely go over all the code
but both proposed answers look like the same thing implemented differently.

You are preloading the images- when link is clicked setting a global var and keeping it
on! when another images is clicked the global var changes and the images change
according right?

Correct me if I am wrong.

CJ

rajgn

cheekycj:

You understood my solution perfectly. But both the solutions are not the same. If you observe closely, you can see the difference. or better I would suugest is, try both of them with some images available with you then you can see the difference.

bigstar

ASKER

Rajgn - I will try both. Maybe I was wrong to reject Quixote's solution?

PBall

You move your mouse over some menu item, the item gets highlighted.

Possiblity 1:
You move out of that menu item to another menu item, the previous item returns to its normal state and the new selected (mouse over) item gets highlighted.

Possiblity 2:
You move out of that menu item to any other area that is not a menu item (say to the right of the selected (mouse over) item, that menu item will still have the same image.

If this is the case, do not implement the onmouseout handler, but rather, add the onmouseout handling into onmouseover of the next/previous item. Just remember to keep track of the active item in some variable:

var activeItem = null;

function mouseover(obj)
{
//this does not handle preloading. I am sure you can figure
//that out by yourself, shouldn't be too hard to modify.

//take care of mouse out of the current active item
//but only if there is an activeItem (in other word, don't
//do this on the first time)

if (activeItem)
{
activeItem.src = 'images/' + activeItem.id + '_off.gif'
}

obj.src = 'images/' + obj.id + '_on.gif'

//change active Item to this item.
activeItem = obj;
}

<img id=menu1 src='images/menu1_off.gif' width=... height=... border=0 onmouseover='mouseover(this)'>
<img id=menu2 src='images/menu2_off.gif' width=... height=... border=0 onmouseover='mouseover(this)'>
<img id=menu3 src='images/menu3_off.gif' width=... height=... border=0 onmouseover='mouseover(this)'>

etc.

This code might only run on IE4 since that's my target platform, but it shouldn't be too hard to modify it to work w/ netscape.

If this is not what you want, I believe the previous code sample by rajgn was right (only change state on click and not on move).

bigstar

ASKER

Thanks - Now I've three scripts to try but little time at present. Will get back sson as I can with the results or some more questions.

Cheers

bigstar

ASKER

rajgn - sorry it's been so long but I finally got a chance to try out your script and thankyou yes it works exactly as wanted it to.

Apologies to Quixote and PBall, I will try out the scripts you've suggested, but I think I should award the point to rajgn.

Thankyou all - all input much appreciated

rajgn if you'd like to repost your comment as an answer I can hand over the well deserved points.

Cheers

Bigstar

ASKER CERTIFIED SOLUTION

rajgn

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

bigstar

ASKER

Couldn't fault it - many thanks - and thanks to Quixote & PBall too.