1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

JavaScript Interactive text

Discussion in 'Web Development' started by RichieR, Jul 13, 2005.

  1. RichieR

    RichieR New Member

    I don't know where to post this, but I hope I get an answer here.

    I designing a website for my neighbour, and he wants to have interactive text. This means when the mouse pointer goes over an certain area of text you get to see a picture (or more) in a certain area. I dont'know how I get this in the website. Maybe I have to do it with PHP scripts or other scripts.

    Please could somebody help? :D
     
  2. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    You would have to do this with javascript:
    Here is an example

    And here is code for it:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Script to change images with javascript</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
    function changeimage(a)
    {
    	document.images[0].src="images/"+a+".gif"
    }
    </script>
    </head>
    <body>
    <h1>Script to change images with javascript</h1>
    <img src="images/smile.gif"/>
    <br />
    <a href="#" onmouseover="changeimage('cool')">Cool</a>
    <a href="#" onmouseover="changeimage('eek')">Eek</a>
    <a href="#" onmouseover="changeimage('mad')">Mad</a>
    <a href="#" onmouseover="changeimage('smile')">Smile</a>
    <a href="#" onmouseover="changeimage('rolleyes')">rolleyes</a>
    <a href="#" onmouseover="changeimage('tongue')">tongue</a>
    <a href="#" onmouseover="changeimage('wink')">wink</a>
    <a href="#" onmouseover="changeimage('frown')">frown</a>
    <br />
    </body>
    </html>
    
     
  3. RichieR

    RichieR New Member

    Question

    Can I do this for the website www.ikkantoor-inrichting.nl and in the category collectie.
    I want to make the words in this category interactive, e.g. when you go over or klik kantinestoelen you get a picture somewhere, I prefer a certain area.
    Is your script capable of doing that? :confused:

    Thanks in advance

    RichieR
     
  4. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    Yes you can do that with this script.
    Here is how the script works.
    document.images[0] tells the script which image it needs to chance if you have 3 images in your HTML file and you want to change the second image in your document you change it in to document.images[1].

    The .src tells it to change the image source.
    "images/"+a+".gif" tell the script in what it has to change the +a+ will be changed with the value you give in the onmouseover="changeimage('cool').
    So it will be images/cool.gif sd
     
  5. Dragosse

    Dragosse New Member

    Interesting,
    Can you RichieR send a link here so we can is how this is look like in the reality, I mean when you add the code.

    Dragosse
     
  6. RichieR

    RichieR New Member

    Oke

    When I finished the code I'll post a message dragosse.


    RichieR
     
  7. RichieR

    RichieR New Member

    Problem

    I've just tried this script http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm for making the text interactive, it works.
    But I rather not see the line under the text, it looks to much like a link.
    I preffer changing the color or just the plain simple text (when you go over the words you'l see the cursor change) I think thats enough.
    Is there a way.
    I tried aplying css style, but it doesn't have any effect on the text.

    Could you help?:(

    Thanks
     
  8. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    Did you try this with css?

    Code:
    a{text-decoration:none;}
    
     
  9. RichieR

    RichieR New Member

    Yes

    I tried that. But it still didn't work.

    Maybe my code is a bit messed up I dont know, i'll show a bit in the next lines (I'm using an adapted template, with ready css styles and made an added a new style):
    Code:
    <p align="center"><img src="Image/cc%20entr%202.png" width="190" height="190"></p></td>
                  </tr>
                </table></TD>
              <TD WIDTH="37" rowspan="2" align="left" VALIGN="top"><!--DWLayoutEmptyCell-->&nbsp;</TD>
              <TD WIDTH="263" height="366" VALIGN="top"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>INRICHTEN 
                </strong> </font><font size="2">  
                <p><font face="Verdana, Arial, Helvetica, sans-serif">• <a><a href="http://www.ikkantoor-inrichting/image/werkbank.jpg" onClick="return enlarge('werkbank.jpg',event,'center',300,375)"> 
                Budget meubilair</span></a></a><br>
                  • Systeem meubilair<br>
                  • Kantine meubilair<br>
                  • Vergader meubilair<br>
                  • Directie meubilair</font></p>
                <p><font face="Verdana, Arial, Helvetica, sans-serif"><strong>OPBERGEN</strong> 
                  </font></p>
                </font> <p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">• 
                  Draaideurkasten<br>
                  • Schuifdeurkasten<br>
                  • Roldeurkasten<br>
                  • Folderkasten en rekken<br>
                  • Archiefkasten<br>
                  • Dossierkasten<br>
                  • Tekeningladekasten<br>
                  • Vitrinekasten<br>
                  • Sleutelkasten<br>
                  • Brandkasten<br>
    I dont know what I'm doing wrong. I tried it severel times.:confused:

    Thanks for the fast reply!
    RichieR
     
  10. RichieR

    RichieR New Member

    I see that the code isn't shown right:

    Code:
    <p><font face="Verdana, Arial, Helvetica, sans-serif">• <a><a href="------/--------/werkbank.jpg" onClick="return enlarge('werkbank.jpg',event,'center',300,375)"> 
                Budget meubilair</span></a></a><br>
     
  11. RichieR

    RichieR New Member

    I see that the code isn't shown right:

    Code:
    <p><font face="Verdana, Arial, Helvetica, sans-serif">• <a><a href="------/--------/werkbank.jpg" onClick="return enlarge('werkbank.jpg',event,'center',300,375)"> 
                Budget meubilair</span></a></a><br>
     
  12. RichieR

    RichieR New Member

    Hi dragosse I finished (for so far) the interactive text on the website http://www.ikkantoor-inrichting.nl/collectie.html
    I don't like the underline beneath the text, I tried a lot but could net get rid of the underline.
    But I think it's oke like this.

    RichieR