29 users online (1 members and 28 guests)  


  Results 1 to 3 of 3

Related

  1. how do I change text color?    Forum: CSS Forum
    Replies: 1
  2. change logo on click    Forum: Javascript Forum
    Replies: 1
  3. Replies: 4
  4. Replies: 1
  5. rollover text change    Forum: CSS Forum
    Replies: 3
  1. #1
    mariadev's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2007
    Posts
    2

    Change text on click

    Hi,
    I am searching for a script that will do the following:

    When a hotspot is clicked, a paragraph of text with change.

    I could get the same effect by linking to a new page with the new text, but its just not the same!

    I am thinking that it should be really simple but I'm just missing it completely.
    Please, if someone could let me know what they think, I would be very happy!

    Thanks, regards, Maria

  2. #2
    mariadev's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2007
    Posts
    2

    Re: Change text on click

    Wait, I've ALMOST got it. I've mashed together pieces of script that I found. It works, but I now can't figure out how to specify which text gets changed.

    Here it is so far:

    Code:
    <script type="text/javascript"> 
    var srcTxt=[ 
    ["image1.jpg","This is a flower"], 
    ["image2.jpg","This is a dog"] 
    ]; 
    function swap(id){ 
    var cont=document.getElementById("cont"); 
    var img=document.createElement('img'); 
    var p=document.createElement('p'); 
    var src=srcTxt[id][0]; 
    var txt=srcTxt[id][1]; 
    img.src=src; 
    p.appendChild(document.createTextNode(txt)); 
    cont.innerHTML=""; 
    cont.appendChild(img); 
    cont.appendChild(p); 
    } 
    window.onload=function(){swap(0)}; 
    </script
    ><div id="cont"></div> 
    <table width="547" border="0" cellpadding="0" cellspacing="0">
    <!--DWLayoutTable-->
    <tr> 
    <td width="161" height="160" valign="top"><img src="flower.jpg" width="140" height="160" border="0" usemap="#Map"></td>
    <td width="140" valign="top"><img src="dog.jpg" width="140" height="160" border="0" usemap="#Map2"></td>
    <td width="246" valign="top">This is the text that I would like to change!</td>
    </tr>
    </table>
    <map name="Map">
    <area shape="rect" coords="4,11,122,140" href="#" onclick="swap(0)">
    </map>
    <map name="Map2">
    <area shape="rect" coords="13,8,127,144" href="#" onclick="swap(1)">
    </map>
    </body>
    </html>
    Last edited by vinyl-junkie; 11-29-2007 at 09:19 AM. Reason: Added code tags

  3. #3
    stephen's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2007
    Posts
    2

    Re: Change text on click

    Hey,

    You just need to change
    HTML Code:
    <td width="246" valign="top" >This is the text that I would like to change!</td>
    to
    HTML Code:
    <td width="246" valign="top" id="cont">This is the text that I would like to change!</td>



Tags for this Thread