Solved

Rollover and Stay - is there such a script

Posted on 1998-11-16
16
271 Views
Last Modified: 2006-11-17
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
Comment
Question by:bigstar
  • 7
  • 5
  • 2
  • +2
16 Comments
 
LVL 1

Expert Comment

by:rajgn
Comment Utility
Simple, DON'T write 'onmouseout' event. Only write 'onmouseover' event.
0
 

Author Comment

by:bigstar
Comment Utility
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
 
LVL 1

Expert Comment

by:rajgn
Comment Utility
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
 

Author Comment

by:bigstar
Comment Utility
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
 
LVL 2

Expert Comment

by:Quixote
Comment Utility
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
 
LVL 1

Expert Comment

by:rajgn
Comment Utility
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
 
LVL 2

Expert Comment

by:Quixote
Comment Utility
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
 

Author Comment

by:bigstar
Comment Utility
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 19

Expert Comment

by:cheekycj
Comment Utility
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
 
LVL 1

Expert Comment

by:rajgn
Comment Utility
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
 

Author Comment

by:bigstar
Comment Utility
Rajgn - I will try both. Maybe I was wrong to reject Quixote's solution?
0
 
LVL 6

Expert Comment

by:PBall
Comment Utility
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
 

Author Comment

by:bigstar
Comment Utility
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
 

Author Comment

by:bigstar
Comment Utility
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
 
LVL 1

Accepted Solution

by:
rajgn earned 70 total points
Comment Utility
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
 

Author Comment

by:bigstar
Comment Utility
Couldn't fault it - many thanks - and thanks to Quixote & PBall too.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now