• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 290
  • Last Modified:

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?

0
bigstar
Asked:
bigstar
  • 7
  • 5
  • 2
  • +2
1 Solution
 
rajgnCommented:
Simple, DON'T write 'onmouseout' event. Only write 'onmouseover' event.
0
 
bigstarAuthor Commented:
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.

0
 
rajgnCommented:
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...
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
bigstarAuthor Commented:
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?
0
 
QuixoteCommented:
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>
<!-- conceal


// set this to the path to the directory your images are in
var ImageRoot = "../images/rollovers/";


// fill this out with the words that are both the image names and their filenames
if (Array)
      var Img = new Array('bob','martha','jimbo','hortence','sally');


// this preloads everything after the page has finished loading
function preloadImages()
      {
      if (document.images)
            {
            PreLoads = new Array();
            for (var xx=0; xx<Img.length; xx++)
                  {
                  PreLoads[xx] = new Image();
                  PreLoads[xx].src = Img[xx] + "_on.gif";
                  }
            }
      }


// this function turns off every image named in Img except the one you want on
function swapAllImages(On)
      {
      if (document.images)
            {
            for (var xx=0; xx<Img.length; xx++)
                  {
                  var OnOff = (Img[xx] == On) ? "_on.gif" : "_off.gif"
                  document.images[Img[xx]].src = ImageRoot + Img[xx] + OnOff;
                  }
            }
      }

// reveal -->

<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
0
 
rajgnCommented:
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> &nbsp;&nbsp; <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>&nbsp;&nbsp; <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.
0
 
QuixoteCommented:
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...
0
 
bigstarAuthor Commented:
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
0
 
cheekycjCommented:
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
0
 
rajgnCommented:
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.
0
 
bigstarAuthor Commented:
Rajgn - I will try both. Maybe I was wrong to reject Quixote's solution?
0
 
PBallCommented:
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).
0
 
bigstarAuthor Commented:
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
0
 
bigstarAuthor Commented:
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
0
 
rajgnCommented:
bigstar:

Thanks for accepting my solution. If you've any other queries, you're always welcome. As you asked I'm posting my code as the answer. Here it is.

assuming there are three images add.gif,edit.gid,next.gif, chages to add_ON.gif,edit_ON.gif, next_ON.gif on mouseover. 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> &nbsp;&nbsp; <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>&nbsp;&nbsp; <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>

Good luck!!!
0
 
bigstarAuthor Commented:
Couldn't fault it - many thanks - and thanks to Quixote & PBall too.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 7
  • 5
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now