dcsimg
www.webdeveloper.com
Results 1 to 8 of 8

Thread: How to Change "alt" dynamically

  1. #1
    Join Date
    Nov 2006
    Posts
    137

    How to Change "alt" dynamically

    I have a code which displays a clickable image.
    Code:
    <A class="FAQ" id="FAQ570t" onmouseover="this.style.cursor='hand'"><img class="FAQ" id="FAQ570i" src="http://kids/ibi_html/kids/images/c_s1c1_023.gif" border="0" width="64" height="32" alt="Click here to show Criteria" align="right"></A>
    Once someone clicks on it, a Div is displayed (which is set to display: none when page is loaded). Now that we have displayed the Div (criteria) I want to change the ďaltĒ message to something like "Click here to hide Criteria". Just curious if anyone would know how to do that? I tried to come up with a function that would change the alt message based on Div display status (either none or inline) but it did not work. Any other suggestion please?
    Mike

  2. #2
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,806

    Smile Try this.

    If I understand the problem, could you use something like this?
    PHP Code:
    <html>
    <
    head>
    <
    title>Change IMG ALT=</title>
    <
    script type="text/javascript">
    // Toggle.js
    function Toggle(Info,AltInfo) {
      var 
    CState document.getElementById(Info);
      if ((
    CState.style.display == "none") || (CState.style.display == '')) {
        
    CState.style.display "block";
        
    document.getElementById(AltInfo).alt='Click here to hide Criteria';
      } else {
        
    CState.style.display "none";
        
    document.getElementById(AltInfo).alt='Click here to show Criteria';
      }
    }
    </script>
    <A href="#" class="FAQ" id="FAQ570t" onmouseover="this.style.cursor='hand'" onClick="Toggle('criteria','FAQ570i')">
    <img class="FAQ" id="FAQ570i" src="http://kids/ibi_html/kids/images/c_s1c1_023.gif" border="0"
     width="150" height="48" alt="Click here to show Criteria" align="right"></A>
    <div id='criteria' style="display:none;background:#ffff00;width:100px">
    Criteria to display
    </div>
    </body>
    </html> 

  3. #3
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Are you changing the image as well so that those with images turned on will know?
    Stephen

  4. #4
    Join Date
    Nov 2006
    Posts
    137
    Thank you so much. Thatís what I was looking for. Felgall I would like to change the image but our client wants to use the same image and just change the alt message. Just curious, if I really had to change it, how would I go about doing this? Do I need to remove the image and create a new one, or would there be another technique I could use? Again, thanks for replying back. I appreciate both of you.

  5. #5
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,806
    Alter the 'src=...' value to the location of the new image when the 'alt=...' information is changed.

  6. #6
    Join Date
    Nov 2006
    Posts
    137
    Thanks JMRKER. It works like a charm

  7. #7
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,806
    You're most welcome.
    Glad I could help as others have helped me.

  8. #8
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Quote Originally Posted by duke_okc
    Thank you so much. Thatís what I was looking for. Felgall I would like to change the image but our client wants to use the same image and just change the alt message. Just curious, if I really had to change it, how would I go about doing this? Do I need to remove the image and create a new one, or would there be another technique I could use? Again, thanks for replying back. I appreciate both of you.
    So since only people with images disabled see the alt text the change will be invisible to anyone with images enabled since they will just see the same image all the time.

    Sounds like you are relying on the IE bug that copies the alt attribute into the title attribute in order for people running IE to see any change. People running a browser that doesn't contain that bug will not see any effect from the code at all. Perhaps you should be updating the title attribute instead of the alt attribute so that everyone can see the change.
    Stephen

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