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?
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>
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? Thanks in advance RichieR
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
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
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
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--> </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. Thanks for the fast reply! RichieR
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>
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>
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
