SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    bahrain
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up changing the image on click

    hi
    i m using a menu but its in html.i have a arrow sign with the link. now i wantto change it to drop down arrow when user clicks that link which is on the same page. how can i ?


    HTML Code:
    <table width="175"  border="0" align="center" cellpadding="0" cellspacing="0">
                          <tr>
                            <td><img src="images/image20.1.gif" width="175" height="7"></td>
                          </tr>
                          <tr>
                            <td background="images/image21.1.gif"><table width="165"  border="0" align="center" cellpadding="0" cellspacing="0">
                                <tr>
                                  <td height="20" ><table width="100%"  border="0" cellspacing="0" cellpadding="0">
                                      <tr>
                                        <td><span class="ver-11-bold-red" style=" padding-left:5px; ">Products & Services</span></td>
                                      </tr>
                                  </table></td>
                                </tr>
                                <tr>
                                  <td height="5"><img src="images/image22.1.gif" width="167" height="5"></td>
                                </tr>
                                <tr>
                                  <td valign="top" bgcolor="#CB8189"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
                                      <tr >
                                        <td height="18" ><table width="100%"  border="0" cellspacing="0" cellpadding="0">
                                            <tr bgcolor="#DDADB2">
                                              <td width="10"><div align="center"><img src="images/arrow3.gif" width="4" height="5"></div></td>
                                              <td height="18" class="ver-11-bold-red">Processing Solutions</td>
                                            </tr>
                                        </table></td>
                                      </tr>
                                      <tr >
                                        <td height="18" ><table width="100%"  border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                              <td width="10" height="18">
    										  <div align="center" id="layer1" style="position:absolute; visibility: hidden;"><img src="images/arrow2.gif" width="3" height="5"></div></td>
                                              <td width="154" height="18" class="ver-11-white">Core Systems</td>
                                            </tr>
                                            <tr class=tdlnav1off onmouseover="this.className='tdlnav1on'" onmouseout="this.className='tdlnav1off'">
                                              <td height="18"><div  align="center"><img src="images/spacer.gif" width="1" height="1"></div></td>
                                              <td height="18" ><a href="#transaction" class="ver-11-red" onClick="abc('im');" >Transaction Management</a></td>
                                            </tr>
                                            <tr class=tdlnav1off onmouseover="this.className='tdlnav1on'" onmouseout="this.className='tdlnav1off'">
                                              <td height="18">&nbsp;</td>
                                              <td height="18"><a href="#authorization" class="ver-11-red">Authorization</a></td>
                                            </tr>
    </table>
    its urgent plzzz.....
    regards
    phphelp

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This works in IE5+, Opera 7+, Netscape 6+, and Firefox.

    Code:
    <script type="text/javascript"><!--
    function swapImg(el) {
      var img1 = el.getElementsByTagName('IMG')[0];
      img1.src = (img1.src.indexOf('example.gif')!=-1)?'example2.gif':'example.gif';
    }
    // -->
    </script>
    Code:
    <a href="..." onclick="swapImg(this);">some example text <img src="example.gif" alt=""></a>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    bahrain
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it i snot working. i odnt know whats the problem.have u chaecke it also.
    its urgent plzzz.....
    regards
    phphelp

  4. #4
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since you're link doesn't contain the image, you'd have to id the img you want changed. Then in the onclick handler:

    Code:
    var img = getElementById('imgid');
    img.src = img.src == 'imgsrc1' ? 'imgsrc2' : 'imgsrc1';

  5. #5
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    bahrain
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not wrokig again. can plz give me the ful code example so taht i can betetr understand dear.
    its urgent plzzz.....
    regards
    phphelp

  6. #6
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    USA
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    function toggle_image(img_name)
    {
    if(some condition)
    document[img_name].src="images/collapse_h.gif";
    } else {
    document[img_name].src="images/expand_h.gif";
    }
    }

    This function works just fine for me. And in your jsp or html --

    <a href="some.html" onclick="javascript:toggle_image('imageName')"><img src="myimg.gif" border="0"></a>

    hope this works for you.

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My code works fine in the browsers I listed.

    Which browser are you using?

    Please post the code you actually tried using.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    bahrain
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i m using IE 5.0. and code i alraedy gave above.
    its urgent plzzz.....
    regards
    phphelp

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *sigh* Perhaps I wasn't clear. When you tested the code that I posted, what changes did you make to the code that you posted?

    You should upgrade to IE6 or, even better, switch to Firefox.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  10. #10
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    bahrain
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in ur code whats hapepe ing , it again taking the same image which is anchor tag.
    look i want lke that when page is loaded with the link the image is my picture ( for example). when user clicks the link it goes to the same page means it is a hash link ( e.g abc.html#xyz) but the image should be now ur piucture ( for eaxample) means changed. like u have seen in menus. when user clicks the arrow goes down if u havew gone down the page???? i think u understand it now and can help me now......
    its urgent plzzz.....
    regards
    phphelp

  11. #11
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kravvitz's code won't work for you since it assumes that the images need to be within the links, and your HTML isn't like that.

    You need to id the arrow images (add an id attribute to them):

    HTML Code:
    <img id="arrowid1" src="arrow1.gif" />
    Then add this function in:

    Code:
    function changeArrow(id, src1, src2) {
    	var img = document.getElementById(id);
    	img.src = (img.src == src1 ? src2 : src1);
    }
    Then for the link:

    HTML Code:
    <a href="javascript:changeArrow('arrowid1', 'arrow1.gif', 'arrow2.gif');">blah</a>
    Last edited by Maian; May 3, 2005 at 02:10. Reason: getElementById => document.getElementById

  12. #12
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    bahrain
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maian, error is coming 'object expected'.why?
    its urgent plzzz.....
    regards
    phphelp

  13. #13
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doh, it should be document.getElementById

  14. #14
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    bahrain
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok but now the image is not changing
    it is the same image 'arriw1.gif'. now wht to do?
    its urgent plzzz.....
    regards
    phphelp

  15. #15
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suspect it may be IE's tendency to modify the src property. Try this:

    Code:
    function changeArrow(id, src1, src2) {
    	var img = document.getElementById(id);
    	img.src = (img.src.indexOf(src1) != -1 ? src2 : src1);
    }

  16. #16
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    bahrain
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanx i got it.
    its urgent plzzz.....
    regards
    phphelp


Bookmarks

Posting Permissions

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