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 5 of 5
  1. #1
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,958
    Thanks
    120
    Thanked 76 Times in 76 Posts

    alternate change img src

    Suppose I have <IMG src = "A.jpg">
    And want to change src alternately on click: A.jpg or B.jpg.

    could do this like that:

    Code:
    var identifer;
    
    function imgOnClick()
    
    {
     if identifer = "A.jpg"
     {
       document.getelementbyid("idOfImgElement").src = "B.jpg":
       identifer = "B.jpg";
     {
     elseif identifer = "B.jpg"
     {
       document.getelementbyid("idOfImgElement").src = "A.jpg":
       identifer = "A.jpg";
     {
    
    }
    any sugestions for more clear code(I dont like having "var identifer;") or perhaps even css ?

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    CSS can't do onClick, but it can do

    :hover (essentially the same as onMouseOver)

    div
    {
    background-image:a.jpg;
    }

    div:hover
    {
    background-image:b.jpg;
    }

    I don't think IE supports the :hover psuedoclass for anything except links, though

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Here's one possibility

    PHP Code:
    function imgOnClick(){

    imgEl=document.getElementById("idOfImgElement")

    if(
    imgEl.src.indexOf("A.jpg")!= -1){
    imgEl.src "B.jpg"
    }
    else{
    imgEl.src "A.jpg"
    }


    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    As you're doing a straight toggle, you don't need to store the other img filename.

    Code:
    function imgOnClick() {
    
    	var imgEl = document.getElementById('idOfImgElement');
    	imgEl.src = (imgEl.src.indexOf('A.jpg') != -1) ? 'B.jpg' : 'A.jpg';
    
    }
    Quote Originally Posted by whizard View Post
    …

    div
    {
    background-image:a.jpg;
    }

    div:hover
    {
    background-image:b.jpg;
    }
    *ahem*

    That would be…
    Code:
    …
    background-image: url(b.jpg);
    …
    I don't think IE supports the :hover psuedoclass for anything except links, though
    That's IE6 and below. IE7 now supports it for all elements.
    Last edited by Bill Posters; 12-17-2006 at 01:52 PM.

  • #5
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    *ahem*
    Yeah, sorry, I should have included it... I was thinking that it would be understood, not sure why lol

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION


  •  

    Posting Permissions

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