www.webdeveloper.com
Results 1 to 15 of 15

Thread: 3 state rollover with onClick state staying active until another image is clicked

  1. #1
    Join Date
    Sep 2008
    Posts
    8

    Question 3 state rollover with onClick state staying active until another image is clicked

    So far I've got this working so that it has a rollover image, click image, and roll out image, but I don't want it to revert back to the original image when you roll out if the image has been clicked--I want it to stay on the click image until another button is clicked.

    Code:
    window.onload = rolloverInit;
    
    function rolloverInit() {
    	for (var i=0; i<document.images.length; i++) {
    		if (document.images[i].name == "Play") {
    			setupRollover(document.images[i]);
    		}
    	}
    }
    
    function setupRollover(thisImage) {
    	thisImage.outImage = new Image();
    	thisImage.outImage.src = thisImage.src;
    	thisImage.onmouseout = rollOut;
    
    	thisImage.clickImage = new Image();
    	thisImage.clickImage.src = "../../images/" + thisImage.id + "playbutton3.jpg";
    	thisImage.onclick = rollClick;	
    
    	thisImage.overImage = new Image();
    	thisImage.overImage.src = "../../images/" + thisImage.id + "playbutton2.jpg";
    	thisImage.onmouseover = rollOver;	
    }
    
    function rollOver() {
    	this.src = this.overImage.src;
    }
    
    function rollOut() {
    	if (this.
    	this.src = this.outImage.src;
    }
    
    function rollClick() {
    	this.src = this.clickImage.src;
    }

  2. #2
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    Code:
    function rollClick() {
    	if(lastClick){
    	lastClick.onmouseout = rollOut;
    	lastClick.src = this.outImage.src;
    	}	
    this.src = this.clickImage.src;
    this.onmouseout = rollClick;
    lastClick = this;
    }
    var lastClick = null;
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  3. #3
    Join Date
    Sep 2008
    Posts
    8
    Woo hoo, that worked perfectly! Thanks so much I really need to learn this stuff so bad

  4. #4
    Join Date
    Sep 2008
    Posts
    8
    I thought of something else... How would you make it so the button reverts back to the original roll out image after 30 seconds?

  5. #5
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    replace rollClick function with this modified rollClick:
    Code:
    function rollClick() {
    if(lastClick) release();
    this.src = this.clickImage.src;
    this.onmouseout = rollClick;
    lastClick = this;
    if(stamp != null)clearTimeout(stamp);
    stamp = setTimeout('release()', 2000);
    }
    
    function release(){
    lastClick.onmouseout = rollOut;
    lastClick.src = lastClick.outImage.src;
    lastClick = null;
    }
    var lastClick = null;
    var stamp;
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  6. #6
    Join Date
    Oct 2010
    Posts
    7
    hi guys,

    what if i want the already clicked button to stay on the click image , until clicked again?When clicked again then it will go back to its normal state with the onmouseover and mouseout effect.

    Thanku.

  7. #7
    Join Date
    Oct 2010
    Posts
    7
    I think that it would be better if i show you my code. With the following code, mouseout,mouseover and onclick functions work just fine. On the other hand, what i want to achieve is whenever an img is clicked for the second time , to change back to its original state with rollover effects enabled.In other words, select and deselect.
    Please bear in mind that i cannot alter any of the html markup, or change any image name.Only the javascript file.

    Code:
        function findimg()
        {
         var imgs,i;
          
        // loop through all images and setup the rollover functions
         imgs=document.getElementById('myTable').getElementsByTagName("img");
         for(i=0;i<imgs.length;i++)
         {
           setupRollover(imgs[i]);
    
         }
        }
    function setupRollover(thisImage) {
    	thisImage.outImage = new Image();
    	thisImage.outImage.src = "../../images/" + thisImage.id + "available.jpg//";
    	thisImage.onmouseout = rollOut;
    
    	thisImage.clickImage = new Image();
    	thisImage.clickImage.src = "../../images/" + thisImage.id + "mine.jpg";
    	thisImage.onclick = rollClick;	
        
    	thisImage.overImage = new Image();
    	thisImage.overImage.src = "../../images/" + thisImage.id + "mine.jpg";
    	thisImage.onmouseover = rollOver;	
        }
    
    function rollOver() {
    	this.src = this.overImage.src;
        }
    
    function rollOut() {
    	this.src = this.outImage.src;
    	
        }
    function rollClick() {
    this.src = this.clickImage.src;
    this.onmouseout = rollClick;
        }

  8. #8
    Join Date
    Jun 2007
    Posts
    667
    Are all these controls supposed to be independent or a group, in which if one is clicked all others reset?
    Y_U U_G_A_E_U_ B_S_A_D_

  9. #9
    Join Date
    Oct 2010
    Posts
    7
    Quote Originally Posted by Sterling Isfine View Post
    Are all these controls supposed to be independent or a group, in which if one is clicked all others reset?
    sorry i m not sure if i completely understood your question. Try to think of it as an application for seat selection. i have a table with x seats (image=available).On mouseover the image turns to "mine", on mouseout back to available. When an image is clicked the img must stay to mine without response to any rollover effect.

    On the other hand, the user must be able to select multiple seats(images) but also to be able to unselect seats. When unselecting seats, the image turns back to available image and starts to response to rollover effects.

    I hope i understood your question correctly. thanks.

  10. #10
    Join Date
    Jun 2007
    Posts
    667
    Quote Originally Posted by jannacs7 View Post
    i have a table with x seats (image=available).On mouseover the image turns to "mine", on mouseout back to available. When an image is clicked the img must stay to mine without response to any rollover effect.

    On the other hand, the user must be able to select multiple seats(images) but also to be able to unselect seats. When unselecting seats, the image turns back to available image and starts to response to rollover effects.
    So they're independent controls. I don't think the code presented is entirely suitable.
    That functionality is quite simple but you'll need a way to read and post the selected states of all controls, and ideally a way to reset them all.
    Y_U U_G_A_E_U_ B_S_A_D_

  11. #11
    Join Date
    Oct 2010
    Posts
    7
    thanks for the response. i ll see what i can do based on what you told me and ill post if anything comes up.

  12. #12
    Join Date
    Apr 2010
    Posts
    2
    I'm lost, but i would like the same fundtion on my site. But how do you set up the HTML for it?

  13. #13
    Join Date
    Aug 2011
    Posts
    1

    Question I'm also looking for this...

    I'm also looking to use this on my site, but I've already got a script in-place for the rollover images. Right now I have it setup to load another HTML page that has the proper image instead of using onclick. I'd rather not have t start from scratch, so I'm hoping there is a way I can modify when I already have to accommodate this functionality.

    Just to clarify what I am trying to do:
    • I want the image to change when you mouse over it, and change back to default when you mouse out
    • I want the image to change when you click on it and stay on that new image when you mouse out
    • I want the new image to remain until another image is clicked on the same page which operates the same way


    This is being used as a menu bar, so when you click on the image i want it to change to a different image to indicate which page you are on. Then when you click a 2nd image to navigate to a different page, i want the first image to revert back to it's original image and the 2nd image to change to a new image.

    Here's the javascript i have in the header:
    Code:
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    and here are the tags i'm using the "<a" tag for the mouseover, mouseout, and onclick:

    Code:
    onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/news-glow.png',1)"

  14. #14
    Join Date
    May 2012
    Posts
    1
    I've implemented this 3-state rollover with onclick staying active, for a series of tabs. Currently when the page loads all tabs are set to Out, but what I'd like is to set a certain tab as the default so when the page loads, that tab is already set to onclick active. Is this possible?

    Any help would be greatly appreciated!

  15. #15
    Join Date
    Jan 2014
    Posts
    1
    Hello, I am also trying to get this thing to work. I would like to: have the tabs to onMouseClick stay on the clicked image, mouseout restore when not clicked and mouseover restore but I have not been able to get it to work. Please help. I would like to use this one page with these tags to navagate this page and also highlight where the viewer is, until they click on a different tab. Thanks!


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>



    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

    <link rel="apple-touch-icon" href="likegallery.png" />

    <title>Photography</title>

    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }

    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }

    function rollClick() {
    if(lastClick){
    lastClick.onmouseout = rollOut;
    lastClick.src = this.outImage.src;
    }
    this.src = this.clickImage.src;
    this.onmouseout = rollClick;
    lastClick = this;
    }
    var lastClick = null;



    //-->
    </script>

    <style>
    h1 { position: fixed; width: 100%; text-align: center; color: black; padding: 0px 0 1px; top: 0; left: 0; z-index: 1; }

    h2 span, #top { margin-top: -300px; padding-bottom: 330px; display: block; }

    h3 { position: fixed; width: 100%; text-align: center; background:#FFDD17; color: black; padding: 0px 0 11px; top: 0; left: 0; z-index: 1; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);}

    h4 { position: fixed; width: 100%; text-align: center; background:#000000; color: black; padding: 0px 0 5px; top: 0; left: 0; z-index: 1; }

    </style>

    <style type="text/css" style="display: none !important;">
    * {
    margin: 0;
    padding: 0;
    }
    body {
    background:#464544 url(bg2.gif) repeat-y; background-position: top center;
    font:80% Trebuchet MS, Arial, Helvetica, Sans-Serif;
    color:#333;
    line-height:180%;
    margin:0;
    padding:0;
    text-align:center;
    }
    a {
    color: #FFFFFF;
    }

    .bsa_it_ad {
    padding: 8px 4px 8px 24px !important;
    position: relative;
    border: 0 !important;
    background: #D6D5D5 !important;
    border-top: 0 !important;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0);
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0);
    -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0);
    width:950px;
    height:100%;
    }

    function clickChapter(type, page, chapter){
    loadContent(type, page);
    changeVideo(chapter);
    removeAllClass();
    addClass(ocument.getElementById('id_'+chapter));
    }

    function removeAllClass(){
    var aAnchor = document.getElementsByTagName('A');
    for(var i=0; i<aAnchor.length; i++){
    aAnchor[i].className = '';
    }

    </style>

    <script language="javascript" type="text/javascript">
    function playSound(soundfile) {
    document.getElementById("shutterclick").innerHTML=
    "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
    }
    </script>

    <script type="text/javascript">
    (function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = '//s3.buysellads.com/ac/bsa.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })();
    </script>

    <script type="text/javascript">
    var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-68528-29']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga); })();
    </script>

    </head>
    <body>

    </div>
    <div id="page-wrap">

    <h3>
    </h3>

    <h4>
    </h4>

    <h1>
    <center>
    <table width="738" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><a href="#three" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','img/tabs/homeon.png',1)"><img src="img/tabs/homeoff.png" ALT="HOME" name="Image1" width="123" height="47" border="0"></a></td>
    <td><a href="#three" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','img/tabs/promoson.png',2)"><img src="img/tabs/promosoff.png" ALT="PROMOS" name="Image2" width="123" height="47" border="0"></a></td>
    <td><a href="#three" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','img/tabs/serviceson.png',3)"><img src="img/tabs/servicesoff.png" ALT="SERVICES" name="Image3" width="123" height="47" border="0"></a></td>
    <td><a href="#three" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','img/tabs/portfolioon.png',4)"><img src="img/tabs/portfoliooff.png" ALT="PORTFOLIO" name="Image4" width="123" height="47" border="0"></a></td>
    <td><a href="#three" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','img/tabs/contacton.png',5)"><img src="img/tabs/contactoff.png" ALT="CONTACT" name="Imag5" width="123" height="47" border="0"></a></td>
    <td><a href="#three" onMouseClick="rollout('Image6','','img/tabs/login.png',6)" onMouseOut="MM_swapImgRestore()" onMouseDown="MM_swapImage('Image6','','img/tabs/login.png',6)" onMouseOver="MM_swapImage('Image6','','img/tabs/loginon.png',6)"><img src="img/tabs/loginoff.png" ALT="LOGIN" name="Image6" width="123" height="47" border="0"></a></td>
    </tr>
    </table>
    </center>
    </h1>
    </div>
    </div>









    <h2>
    <center>
    <span id="one"> &nbsp; </span>
    Section One
    </center>
    </h2>


    <h2>
    <center>
    <span id="two"> &nbsp; </span>
    Section Two
    </center>
    </h2>

    <p><a href="#top">Top</a></p>


    <h2>
    <center>
    <span id="three"> &nbsp; </span>
    Section Three
    </center>
    </h2>

    <p><a href="#top">Top</a></p>

















    </body>

    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles