Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Feb 2003
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help this stupid Scripter with Mousover!!!

    I have a simple mouseover effect. The buttons that I am maniupulating have 2 instances, one where they are off, and one where they are on. When the user puts the mouse over the button, the on picture comes up perfect on the web. Whats the problem.....

    I want the on picture to stay on if the page corresponding to the button is open ! It will not . In other words imagine this scenario with the follwoing menu

    CONTACTS SERVICES PRODUCTS SCHLIZ

    The person puts the mouse over products, PRODUCTS lights up, the user clicks products, the user is directed to the products page, NOW.... the user decides he wants to learn more about products on the page so he moves the mouse above a product on the page. The instant the mouse leaves the PRODUCTS button, it turns off to the off instance.

    I am ovbviously missing some code or didnt include somthing because this function is not happening. PLEASE HELP!!


    HERE IS THE BASIC CODE that you need to know to solve this problme

    <script language="JavaScript">

    if (document.images) {
    var quality_Depton = new Image();
    quality_Depton.src="images/about_us_on.gif";

    var quality_Deptoff = new Image();
    quality_Deptoff.src = "images/about_us_off1.gif";

    var our_teamon = new Image();
    our_teamon.src="images/our_team_on.gif";

    var our_teamoff = new Image();
    our_teamoff.src = "images/our_team_off2.gif";

    var six_sigmaon = new Image();
    six_sigmaon.src="images/six_sigma_on.gif";

    var six_sigmaoff = new Image();
    six_sigmaoff.src = "images/six_sigma_off.gif";

    var Projectson = new Image();
    Projectson.src="images/projects_on.gif";

    var Projectsoff = new Image();
    Projectsoff.src = "images/projects_off.gif";

    var linkson = new Image();
    linkson.src="images/links_on.gif";

    var linksoff = new Image();
    linksoff.src = "images/links_off.gif";

    var contact_uson = new Image();
    contact_uson.src="images/contact_us_on.gif";

    var contact_usoff = new Image();
    contact_usoff.src = "images/contact_us_off1.gif";


    }

    function imgOn(imageName) {
    if (document.images) {
    document[imageName].src = eval(imageName + "on.src");
    }
    }

    function imgOff(imageName) {
    if (document.images) {
    document[imageName].src = eval(imageName + "off.src");
    }
    }

    // -->
    </script>
    </HEAD>


    NOW THE BUTTON CALLING CODE

    <TD><IMG SRC="images/blank.gif" WIDTH="335" HEIGHT="20" BORDER="0"><A HREF="Quality Dep't.html"><IMG SRC="images/about_us_off1.gif" WIDTH="68" HEIGHT="20" BORDER="0" ALT="Quality Dep't" NAME="quality_Dept" onMouseOver="imgOn('quality_Dept')" ONMOUSEOUT="imgOff('quality_Dept')"></A><IMG SRC="images/blank.gif" WIDTH="33" HEIGHT="20" BORDER="0"><A HREF="our_team.html"><IMG SRC="images/our_team_off2.gif" WIDTH="98" HEIGHT="20" BORDER="0" ALT="Our Team" NAME="our_team" onMouseOver="imgOn('our_team')" ONMOUSEOUT="imgOff('our_team')"></A><IMG SRC="images/blank.gif" WIDTH="33" HEIGHT="20" BORDER="0"><A HREF="six sigma.html"><IMG SRC="images/six_sigma_on.gif" WIDTH="94" HEIGHT="20" BORDER="0" ALT="Six sigma" NAME="six_sigma" onMouseOver="imgOn('six_sigma')" ONMOUSEOUT="imgOff('six_sigma')"></A><IMG SRC="images/blank.gif" WIDTH="33" HEIGHT="20" BORDER="0"><A HREF="projects.html"><IMG SRC="images/projects_off.gif" WIDTH="89" HEIGHT="20" BORDER="0" ALT="Projects" NAME="Projects" onMouseOver="imgOn('Projects')" ONMOUSEOUT="imgOff('Projects')"></A><IMG SRC="images/blank.gif" WIDTH="30" HEIGHT="20" BORDER="0"><A HREF="links.html"><IMG SRC="images/links_off.gif" WIDTH="57" HEIGHT="20" BORDER="0" ALT="links" NAME="links" onMouseOver="imgOn('links')" ONMOUSEOUT="imgOff('links')"></A><IMG SRC="images/blank.gif" WIDTH="33" HEIGHT="20" BORDER="0"><A HREF="contact_us.html"><IMG SRC="images/contact_us_off1.gif" WIDTH=90" HEIGHT="20" BORDER="0" ALT="Contact Us" NAME="contact_us" onMouseOver="imgOn('contact_us')" ONMOUSEOUT="imgOff('contact_us')"></A></TD>

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    You need a different script.

    This works for IE5.5



    <script language="JavaScript">
    var Images = new Array("on.gif","off.gif") // list images to preload
    var preloadImages=new Array() // preloads images
    for (i=0;i<=Images.length-1;i++) {
    preloadImages[i]=new Image()
    preloadImages[i].src=Images[i]
    }

    LastID = ""

    function ON(id){
    (LastID != id?document.getElementById(id).src = "on.gif":"")
    }

    function OFF(id){
    (LastID != id?document.getElementById(id).src = "off.gif":"")
    }

    function ACTIVE(id){
    document.getElementById(id).src = "on.gif"
    if (LastID != ""){
    (LastID != id?document.getElementById(LastID).src = "off.gif":"")
    }
    LastID = id
    }
    // -->
    </script>

    <a href="yourpage.htm" onMouseOver="ON('image1');" onMouseOut="OFF('image1')" onClick="ACTIVE('image1')"><img src="off.gif" border="0" name="image1"></a>

    <a href="yourpage.htm" onMouseOver="ON('image2');" onMouseOut="OFF('image2')" onClick="ACTIVE('image2')"><img src="off.gif" border="0" name="image2"></a>

    <a href="yourpage.htm" onMouseOver="ON('image3');" onMouseOut="OFF('image3')" onClick="ACTIVE('image3')"><img src="off.gif" border="0" name="image3"></a>

    <a href="yourpage.htm" onMouseOver="ON('image4');" onMouseOut="OFF('image4')" onClick="ACTIVE('image4')"><img src="off.gif" border="0" name="image4"></a>

    <a href="yourpage.htm" onMouseOver="ON('image5');" onMouseOut="OFF('image5')" onClick="ACTIVE('image5')"><img src="off.gif" border="0" name="image5"></a>

    <a href="yourpage.htm" onMouseOver="ON('image6');" onMouseOut="OFF('image6')" onClick="ACTIVE('image6')"><img src="off.gif" border="0" name="image6"></a>



  • #3
    New to the CF scene
    Join Date
    Feb 2003
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    eh?

    where do i load the names of my pictures. for example one of my picture names is quality_department_on.gif , the other name for this is quality_department_off.gif

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Change all instances of

    on.gif

    to

    quality_department_on.gif


    and all instances of

    off.gif

    to

    quality_department_off.gif


    er ..... does each link have its own image .... if so you want my other script.

    If they are separate images, list the image names and I will enter them in the script when I repost
    Last edited by Mr J; 02-20-2003 at 09:34 PM.

  • #5
    New to the CF scene
    Join Date
    Feb 2003
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i have 2 pictures for every one link.

    the following is the list of all my pictures

    our_team_off2
    our_team_on
    projects_on
    projects_off
    links_on
    links_off
    six_sigma_on
    six_sigma_off
    contact_us_on
    contact_us_off1
    about_us_on
    about_us_off1

    Does this answer your question, can you address mine, I cannot replace every instance of on and off because I have multiple images?

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Try this.





    <HTML>
    <HEAD>
    <TITLE>Document Title</TITLE>
    <script language="JavaScript">
    <!--
    var Images = new Array("our_team_off2.gif","our_team_on.gif","projects_off.gif","projects_on.gif","links_off.gif","li nks_on.gif","six_sigma_off.gif","six_sigma_on.gif","contact_us_off1.gif","contact_us_on.gif","about_ us_off1.gif","about_us_on.gif") // list images to preload
    var preloadImages=new Array() // preloads images
    for (i=0;i<=Images.length-1;i++) {
    preloadImages[i]=new Image()
    preloadImages[i].src=Images[i]
    }

    LastID = ""

    function ON(id,picon){
    (LastID != id?document.getElementById(id).src = picon:"")
    }

    function OFF(id,picoff){
    (LastID != id?document.getElementById(id).src = picoff:"")
    }

    Lastpic=""
    function active(id,picon,picoff){
    document.getElementById(id).src = picon
    if (LastID != ""){
    (LastID != id?document.getElementById(LastID).src = Lastpic:"")
    }
    LastID = id
    Lastpic=picoff
    }
    // -->
    </script>

    </HEAD>
    <BODY>
    <a href="#null" onclick="active('mypic1','our_team_on.gif','our_team_off2.gif');this.blur()" onmouseover="ON('mypic1','our_team_on.gif' )" onmouseout="OFF('mypic1','our_team_off2.gif')"><img src="our_team_off2.gif" border="0" name="mypic1" ALT= "Your Choice"></a> <BR>

    <a href="#null" onclick="active('mypic2','projects_on.gif','projects_off.gif');this.blur()" onmouseover="ON('mypic2','projects_on.gif' )" onmouseout="OFF('mypic2','projects_off.gif')"><img src="projects_off.gif" border="0" name="mypic2" ALT= "Your Choice"></a><BR>

    <a href="#null" onclick="active('mypic3','links_off_on.gif','links_off.gif');this.blur()" onmouseover="ON('mypic3','links_off.gif' )" onmouseout="OFF('mypic3','links_off.gif')"><img src="links_off.gif" border="0" name="mypic3" ALT= "Your Choice"></a><BR>

    <a href="#null" onclick="active('mypic4','six_sigma_on.gif','six_sigma_off.gif');this.blur()" onmouseover="ON('mypic4','six_sigma_on.gif' )" onmouseout="OFF('mypic4','six_sigma_off.gif')"><img src="six_sigma_off.gif" border="0" name="mypic4" ALT= "Your Choice"></a><BR>

    <a href="#null" onclick="active('mypic5','contact_us_on.gif','contact_us_off.gif');this.blur()" onmouseover="ON('mypic5','contact_us_on.gif' )" onmouseout="OFF('mypic5','contact_us_off.gif')"><img src="contact_us_off.gif" border="0" name="mypic5" ALT= "Your Choice"></a><BR>

    <a href="#null" onclick="active('mypic6','about_us_on.gif','about_us_off1.gif');this.blur()" onmouseover="ON('mypic6','about_us_on.gif' )" onmouseout="OFF('mypic6','about_us_off1.gif')"><img src="about_us_off1.gif" border="0" name="mypic6" ALT= "Your Choice"></a>

    </BODY>
    </HTML>


  • #7
    New to the CF scene
    Join Date
    Feb 2003
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Mr -J ...getting closer but not yet there

    This is what I have following your recommendation (NOTE THIS IS JUST ONE BUTTONS CODE). However , when I put my mouse over the picture it completely disappears! Instead of seeing the on picture , I see the text of the picture (probably cominf from the code) when i roll my mousover it. it does seem to stay on if it is the active page button.

    <TD><IMG SRC="images/blank.gif" WIDTH="335" HEIGHT="20" BORDER="0"><A HREF="Quality Dep't.html" onclick="active('mypic6','about_us_on.gif','about_us_off1.gif');this.blur()" onMouseOver="ON('mypic6','about_us_on.gif')" onMouseout="OFF('mypic6','about_us_off1.gif')"> <IMG SRC="images/about_us_on.gif" WIDTH="68" HEIGHT="20" BORDER="0" ALT="Quality Dep't" NAME="mypic6"> </A>
    Last edited by finnstone; 02-21-2003 at 09:41 PM.

  • #8
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    HI.

    I take it you have your images in a folder called "images".

    You have not put the full path for the mouse event images.




    <TD><IMG SRC="images/blank.gif" WIDTH="335" HEIGHT="20" BORDER="0"><A HREF="Quality Dep't.html" onclick="active('mypic6','about_us_on.gif','about_us_off1.gif');this.blur()" onMouseOver="ON('mypic6','about_us_on.gif')" onMouseout="OFF('mypic6','about_us_off1.gif')"> <IMG SRC=" images/about_us_on.gif " WIDTH="68" HEIGHT="20" BORDER="0" ALT="Quality Dep't" NAME="mypic6"> </A>



    If this does not work put your images in a zip file and post them here.

    I will then test the script with your images and repost it

  • #9
    New to the CF scene
    Join Date
    Feb 2003
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    still does not work Mr J

    Now, the old problem is back. The highlight, of the button whos page is open, does not stay on if I move the mouse away.

    Here is my code again

    <TD><IMG SRC="images/blank.gif" WIDTH="324" HEIGHT="15" BORDER="0"><A HREF="Quality Dep't.html" onclick="active('mypic6','images/about_us_on.gif','images/about_us_off1.gif');this.blur()" onMouseOver="ON('mypic6','images/about_us_on.gif')" onMouseout="OFF('mypic6','images/about_us_off1.gif')"> <IMG SRC="images/about_us_on.gif" WIDTH="68" HEIGHT="20" BORDER="0" ALT="Quality Dep't" NAME="mypic6"> </A> <IMG SRC="images/blank.gif" WIDTH="33" HEIGHT="20" BORDER="0"><A HREF="our_team.html" onclick="active('mypic1','images/our_team_on.gif','images/our_team_off2.gif');this.blur()"onMouseOver="ON('mypic1','images/our_team_on.gif' )" ONMOUSEOUT="OFF('mypic1','images/our_team_off2.gif')"><IMG SRC="images/our_team_off2.gif" WIDTH="98" HEIGHT="20" BORDER="0" ALT="Our Team" NAME="mypic1"> </A> <IMG SRC="images/blank.gif" WIDTH="33" HEIGHT="20" BORDER="0"><A HREF="six sigma.html" onclick="active('mypic4','images/six_sigma_on.gif','images/six_sigma_off.gif');this.blur()" onmouseover="ON('mypic4','images/six_sigma_on.gif' )" onmouseout="OFF('mypic4','images/six_sigma_off.gif')"><IMG SRC="images/six_sigma_off.gif" WIDTH="94" HEIGHT="20" BORDER="0" ALT="Six sigma" NAME="mypic4"> </A><IMG SRC="images/blank.gif" WIDTH="33" HEIGHT="20" BORDER="0"><A HREF="projects.html" onclick="active('mypic2','images/projects_on.gif','images/projects_off.gif');this.blur()" onmouseover="ON('mypic2','images/projects_on.gif' )" onmouseout="OFF('mypic2','images/projects_off.gif')"><IMG SRC="images/projects_off.gif" WIDTH="89" HEIGHT="20" BORDER="0" ALT="Projects" NAME="mypic2"></A><IMG SRC="images/blank.gif" WIDTH="30" HEIGHT="20" BORDER="0"><A HREF="links.html" onclick="active('mypic3','images/links_on.gif','images/links_off.gif');this.blur()" onmouseover="ON('mypic3','images/links_on.gif' )" onmouseout="OFF('mypic3','images/links_off.gif')"> <IMG SRC="images/links_off.gif" WIDTH="57" HEIGHT="20" BORDER="0" ALT="links" NAME="mypic3"></A><IMG SRC="images/blank.gif" WIDTH="33" HEIGHT="20" BORDER="0"><A HREF="contact_us.html" onclick="active('mypic5','images/contact_us_on.gif','images/contact_us_off1.gif');this.blur()"onmouseover="ON('mypic5','images/contact_us_on.gif' )" onmouseout="OFF('mypic5','images/contact_us_off1.gif')"><IMG SRC="images/contact_us_off1.gif" WIDTH=90" HEIGHT="20" BORDER="0" ALT="Contact Us" NAME="mypic5"></A></TD>
    Attached Files Attached Files

  • #10
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Download and see what you think.
    Attached Files Attached Files

  • #11
    New to the CF scene
    Join Date
    Feb 2003
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    mr j almost there!

    i think its great, however, now the links do not work, i cannot get out of the current page!

  • #12
    New to the CF scene
    Join Date
    Feb 2003
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I came up with the solution, wow!

    went back to my old code and cheated, will alter the code for each page so that the onmouseout of JUST the current highlighted button will say imgON

    e..g

    ONMOUSEOUT="imgOn('six_sigma'

  • #13
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Sorry Finnstone.

    I forgot to re-enable the links.

    I disabled the links so I could test them without them loading.


    Delete all instances of

    ;return false

    from the links

  • #14
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Here's the amended page.

    Is this page going to be used in a frameset?
    Attached Files Attached Files

  • #15
    New to the CF scene
    Join Date
    Feb 2003
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks, yes it does work. it is going to be used in a frameset , actually for some reason it does not fit as well - the frame it was in has bceom bigger. but oh well. i am very happy that it works like this, and i also have my other old code working as well.

    thanks for sticking with me the whole time, i know it was many iterations, you were very helpful the whole time.

    rob


  •  

    Posting Permissions

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