PDA

View Full Version : 3 images(or imagemap), 1 textbox.



oystein
Jan 13th, 2007, 04:18 PM
I am currently looking for a way to have 3 seperate images (or a imagemap with 3 zones), which share a common textbox. It should work in a way that when you hover over the different images(or zones), each image' parented text are displayed in the textbox.

Thanks,
oystein.

Pennimus
Jan 13th, 2007, 04:49 PM
Sounds like a simple JavaScript thing utilising onMouseOver on the images to generate text at the same named target location. I don't know JS though so might be best to ask in that forum, or have this moved.

Mr J
Jan 13th, 2007, 05:53 PM
You could try itlike this



<script type="text/javascript">

txt=[
"Image one text",
"Text about image 2",
"Third lot of text"
]

function showText(n){

document.getElementById("textdisplay").innerHTML=txt[n]

}


</script>

<style type="text/css">

#textdisplay{
width:100px;
border:1px solid blue;
}

</style>

<img src="pic1" onmouseover="showText(0)">
<img src="pic2" onmouseover="showText(1)">
<img src="pic3" onmouseover="showText(2)">

<div id="textdisplay"></div>

oystein
Jan 15th, 2007, 02:04 PM
You could try itlike this



<script type="text/javascript">

txt=[
"Image one text",
"Text about image 2",
"Third lot of text"
]

function showText(n){

document.getElementById("textdisplay").innerHTML=txt[n]

}


</script>

<style type="text/css">

#textdisplay{
width:10px;
border:1px solid blue;
}

</style>

<img src="pic1" onmouseover="showText(0)">
<img src="pic2" onmouseover="showText(1)">
<img src="pic3" onmouseover="showText(2)">

<div id="textdisplay"></div>


Suberb, that works like a charm except for one thing. The text does not support paragraphs? It seems that the text has to remain on one line of code, or it will not show up at all. How can i solve this? Any code in the textfield will show up as text, rather than code.
Could this code be adapted to get the text from a document with preformatted text?


Another small problem is that the code works fine with the Norwegian Charset () in Dreamweaver, but when i copy the exact same code into RapidWeaver, i get the "%aring;", etc.

Mvh,
ystein Helle Husby

Mr J
Jan 15th, 2007, 02:53 PM
Not sure what you mean here



The text does not support paragraphs?


Can you post an example of your page or a url

Just noticed a typeo in my previous post

width:10px;

should be at least

width:100px;

or whatever size you choose

oystein
Jan 15th, 2007, 07:51 PM
Testversions
Working one: http://home.nktv.no/terhusby/test2.html with this code



txt=[
"tekst1",
"tekst2",
"Here is a text which is fairly long, but is kept on the same line of code. And as you can see, this works fine.",
]


This element has 4(5) lines of code

Not working one: http://home.nktv.no/terhusby/test3.html with this code



txt=[
"tekst1",
"tekst2",
"But when the text has paragraphs,
which causes it to spread over several lines of code,
the text wont show up at all!",
]



Whereas this has 6(7), because of the paragraphs in the text

Obviously, the text then has to be limited to one line of code. How can i fix this? Any coding directly in the text will not be treated as code, but rather as normal text.

Mr J
Jan 15th, 2007, 08:30 PM
Try it like this


txt=[
"tekst1",
"tekst2",
"But when the text has paragraphs,<br>which causes it to spread over several lines of code,<br>the text wont show up at all!",
]

oystein
Jan 15th, 2007, 08:58 PM
As i mentioned, the tags aren't treated as code but text, like this: http://home.nktv.no/terhusby/test4.html

Mr J
Jan 15th, 2007, 11:33 PM
Try your function this way



txt=[
"tekst1",
"tekst2",
"But when the text has paragraphs<br>which causes it to spread over several lines of code,<br>the text wont show up at all!",
]

function showText(n){
element = document.getElementById("textdisplay");
element.innerHTML=txt[n]
}

oystein
Jan 16th, 2007, 12:58 PM
Thanks, it works like a charm. Although i've heard that innerHTML is no-no?

Anyways, i'll go with that code. Thanks again for all your help :thumbsup:

Mr J
Jan 16th, 2007, 02:51 PM
There are probably instances where innerHTLM should not be used and all microsoft haters will say it's a no-no anyway but it is still widely used because of its simplicity.