Jump to content

javascript imahe map text hide onmouseout


virtualadz

Recommended Posts

i have a image map which i want the text to hide on mouseout, but it didn't, see the code below i have given mouseout but it doen't have any effetc.<script type="text/javascript">function writeText(txt){document.getElementById("desc").innerHTML=txt}</script><img src="world_map.bmp" usemap="#world_map" alt="" style="border-style:none" /><map id="world_map" name="world_map"><area shape="circle" alt="W3schools" coords="401,131,6" nohref title="India" onMouseOver="writeText('VirtualAdz')" onMouseOut="hide('desc')" /></map>

Link to comment
Share on other sites

i forgto to add this in the ending<p id="desc"></p>

Well then your code works fine, if i use the w3schools logo and change the coordinates everythings good (mouseover top left corner)You must have incorrect coordinates or something :)
<head><script type="text/javascript">function writeText(txt){document.getElementById("desc").innerHTML=txt;}</script></head><body><img src="http://w3schools.invisionzone.com/style_images/w3sbanner.gif" usemap="#world_map" alt="" style="border-style:none" /><map id="world_map" name="world_map"><area shape="circle" alt="W3schools" coords="10,10,6" nohref title="India" onMouseOver="writeText('VirtualAdz')" onMouseOut="hide('desc')" /><div id="desc">o</div></map> </body>

Link to comment
Share on other sites

scott's code called an undefined function "hide"try this:

<html><head><script type="text/javascript">function writeText(txt){document.getElementById("desc").innerHTML=txt;}function hide(txt){document.getElementById("desc").innerHTML=txt;}</script></head><body><img src="http://w3schools.invisionzone.com/style_images/w3sbanner.gif" usemap="#world_map" alt="" style="border-style:none" /><map id="world_map" name="world_map"><area shape="circle" alt="W3schools" coords="10,10,6" nohref title="India" onMouseOver="writeText('VirtualAdz')" onMouseOut="hide('')" /><div id="desc"></div></map></body><html>

Link to comment
Share on other sites

you know, maybe one of these days i'll learn to think before i post.

<html><head><script type="text/javascript">function writeText(txt){document.getElementById("desc").innerHTML=txt;}</script></head><body><img src="http://w3schools.invisionzone.com/style_images/w3sbanner.gif" usemap="#world_map" alt="" style="border-style:none" /><map id="world_map" name="world_map"><area shape="circle" alt="W3schools" coords="10,10,6" nohref title="India" onMouseOver="writeText('VirtualAdz')" onMouseOut="writeText('')" /><p id="desc"></p></map></body><html>

Link to comment
Share on other sites

your code and scott's code didn't work because you were calling an undefined function: hide.in my first post, i simply created the hide function, then i had a bto (blind flash of the obvious) and simply called the writetext code both times, changing the parameter.

Link to comment
Share on other sites

hey but your code didn;t hide it on my pc

That's because you never posted that function, you only posted the function that changes the text :) All you had to do was add it in...Anyway, thanks to Kosher Kid for standing in while i was away :)
Link to comment
Share on other sites

hi ok my next question is : i want to insert <br> <b> and such tags within the function "writetext('VirtualAdz<br>dad<b>dad</b>dada<br>da')" but when validating it with w3.org , these tags are shown as errors and they can't be included there. is there a other way i can add text out here with <br> and <b> etc.

Link to comment
Share on other sites

  • 3 weeks later...

ok hi , now making the image map further more complex. i want a world clock and or that what i want is suppose, if someone moves mouse over US in the map then the time is shown, now do i make a rotating clock. is there a way or is it too complex.

Link to comment
Share on other sites

We're not here to write code for you, i'm sorry to say. You'll just have to figure it out, and we'll guide you in the right direction.

Link to comment
Share on other sites

years ago I was contracted to for a job where I created this look and feel:http://www.lessonlab.comI'm not sure how large your imagemap is, but the mouseovers down the middle here are images - I used a simple rollover script and embedded my text in the image.Without more information or a visualation of your page/image, I am not sure if this solution would be feasible - but, the idea of embedding your text in your image and then using a rolloever might be worth exploring - even if you have several different text messages that need to be overlayed, just make more copies fo your imagemap with that text embedded.It may seem like a lot of work, but if done properly, the benefits outweigh the means. For instance, this solutions is better for search engines because the links and the text (img alt text) are able to be spidered by search engines - very important for this client. If you use div and display:none; then all that text is not typically accessible to search engine spiders.Just a thought . . .

Link to comment
Share on other sites

what i neede was: a image map, as world clock, i.e. whenever someone hovers over a area, a time is shown, but i dont want to manually update the time, rather a clock, and the time updates itslef auto, may be it could be done using js. but i have no idea. that's way thought of flash as a better option

I'm not sure how large your imagemap is

see this for an example of the size

Link to comment
Share on other sites

see this for an example:http://www.dhl.co.in/publish/in/en/tools/w...clock.high.htmlthe clock in there is a world map, made in java, but rather i want it in a image map using javascript.
Yes i would think that you could recreate this with javascript. :)
the clock wont be based on the visitor's computer.
Well considering javascript gets its date object information from the system clock how do you plan on doing this? You would have to write times from the server :)
Link to comment
Share on other sites

Well considering javascript gets its date object information from the system clock how do you plan on doing this? You would have to write times from the server

can't a time be set, and that would rotate by every 24 hrs., let's say a time is set, 13:41 now through js the time will increase 13:42 , so no need of visitor's settings. bcoz this will be a world clock and the visitor's clock may not be correct. that's the point.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...