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 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    adapting image function to use text

    hi, i have some code i'm trying to adapt from using an image to using text. right now i have a "box" image that has mouseover, select and deselect functions. i'd like to use text instead. is this possible with this piece of code? here's what i'm using, any thoughts appreciate.


    Code:
    function boxMouseOver (num) {
        document.images['box' + num].src = 'images/box_on.gif';
    }
    
    function boxSelect (num) {
        if ( boxSelected )
    	document.images['box' + boxSelected].src = 'images/box_off.gif';
        boxMouseOver (num);
        boxSelected = num;
        makeInActive('info');
    }
    
    function boxDeSelect () {
        if ( boxSelected )
    	document.images['box' + boxSelected].src = 'images/box_off.gif';
        boxSelected = 0;
    }
    
    function boxMouseOut (num) {
        if ( boxSelected != num )
    	document.images['box' + num].src = 'images/box_off.gif';
    }
    
    function makeActive (targetId)
    {
        if (document.getElementById)
        {
    	target = document.getElementById( targetId );
    	if (target)
    	    target.className = "active";
        }
    }
    
    function makeInActive (targetId)
    {
        if (document.getElementById)
        {
    	target = document.getElementById( targetId );
    	if (target)
    	    target.className = "inactive";
        }
    }
    here's the line

    Code:
    <a href="javascript://" onClick="boxSelect(1); onMouseOver="boxMouseOver (1)" onMouseOut="boxMouseOut(1)"><IMG SRC="images/box_on.gif" WIDTH="13" HEIGHT="18" name="box1" border=0></a>

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    I'm having difficulty seeing your end result. Anyway, could you state what your goal is. We might be able to whip one for you.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    hey rangana, i'm creating a portfolio for a client that's grabbing images via php. i'd like to have numbers along the bottom of the images that people can click to view the images. these numbers need to have mouseover, selected, deselected and mouseout states. i used to use images of boxes, but now the client would like it to be numbers. i'm wondering if the code i have above is something that can be changed to numbers.
    i also sent an email to you about this. thanks much

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Okay, I see your the goal. Thanks. Since you want to replace image with text (numbers), what behavior do you expect? For onmouseover, onclick and onmouseout event?

    Sidenote, I've received your email, but the link you've given failed. You might want to send it back to me.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #5
    New Coder
    Join Date
    Jun 2008
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    well, a click is triggering a screen wipe transition, here's the full line of code:

    Code:
    <a href="javascript://" onClick="boxSelect(1); doWipeTrans('wipeDiv1','in left')" onMouseOver="boxMouseOver (1)" onMouseOut="boxMouseOut(1)"><IMG SRC="images/box_on.gif" WIDTH="13" HEIGHT="18" name="box1" border=0></a>
    but i've got the wipe working fine. just need to figure out how to change this to numbers (text) instead of images with the same characteristics, namely onmouseover, onclick and onmouseout events. i tried using numbers and a <div name="box1">, but i don't know enough about the javascript to change it to be numbers.

  • #6
    New Coder
    Join Date
    Jun 2008
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    i think i've got it

    i'm going to scrap the image code and use this:

    Code:
    function makeActive (targetId)
    {
        if (document.getElementById)
        {
    	target = document.getElementById( targetId );
    	if (target.className == "inactive")
    	{
    	    // make any active target inactive before this one becomes active
    	    if ( activeTarget )
    		{ activeTarget.className = "inactive"; }
    
    	    target.className = "active";
    	    activeTarget = target;
    	}
        }
    }
    simple. thanks for looking over this with me.


  •  

    Posting Permissions

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