Multiple tooltips on single image?

liunx

Guest
hi, <br />
<br />
i have a image in my html page.<br />
Now i want to have different tooltip in different parts of my image.<br />
<br />
For Example: I have a image of a boy, now i want to have tooltip "HEAD" in the head of the boy, tooltip "LEGS" in the legs portion<br />
of the image of the boy. <br />
<br />
So i want to know is this possible to have different tooltips in different portions of the image.<br />
<br />
thanx in advance.<br />
<br />
Rachna<!--content-->If what you mean by 'tool tip' is the little text box that pops up when you hover your mouse over different parts of the image then one way of doing it is to use image maps. Mark out the different areas with individual image maps and set the ALT values to equal whatever you want the tool tips to say.<br />
<br />
I expect there are much nicer ways of doing it using JavaScript, but I can't help you there I'm afraid!<!--content-->Hello Rachna,<br />
<br />
What do you meant by tooltip? I heard it first time. YOu are not looking for slicing na?? <br />
Thanx<br />
<br />
Amruta..<!--content-->ya exactly i m talking abt the little text box that pops up when we hover the mouse over different parts of the image.<br />
<br />
Can u give me some idea abt the Image maps, i don't know abt image map at all.<br />
<br />
Thanx.<br />
Rachna<!--content-->Image maps are basically areas of an image that you define by specifying the pixel coordinates. You can make these areas into links if you want. <br />
<br />
I normally use Dreamweaver to create my image maps because it's very easy to do. Some graphics programs have a facility to create image maps too. You could Download <!--more--> the free trial version of Dreamweaver from the Macromedia website: <!-- w --><a class="postlink" href="http://www.macromedia.com">www.macromedia.com</a><!-- w --><br />
<br />
When you have a normal image you use the HTML:<br />
<br />
<IMG SRC=http://www.htmlforums.com/archive/index.php/"image.jpg" ALT="This is an image"><br />
<br />
If you hover the mouse over the image it will display the text box with "This is an image" in it.<br />
<br />
Image maps basically divide up the image into areas. You can specify different values for the ALT attribute for each area, so depending on where you move your mouse it will display different text boxes.<br />
<br />
I hope someone else can explain this more clearly for you!!<!--content-->Tutorial:<br />
<!-- m --><a class="postlink" href="http://hoohoo.ncsa.uiuc.edu/docs/tutorials/imagemapping.html">http://hoohoo.ncsa.uiuc.edu/docs/tutori ... pping.html</a><!-- m --><!--content-->Or, you could slice up the image, using Adobe ImageReady, for example. That is, cut the one image into several, and place them in the correct order inside a table cell. Then you define the ALT-text for each image. <br />
<br />
I guess you can do this in a shareware photo-editor too.<br />
<br />
Tip: Tool tips can also be achieved by the TITLE attribute, which applies to almost all tags.<br />
<br />
-aslefo<!--content-->nah, imagemap is easier... one image, no special placement neccissary.<!--content-->Originally posted by aslefo <br />
Or, you could slice up the image, using Adobe ImageReady, for example. That is, cut the one image into several, and place them in the correct order inside a table cell. Then you define the ALT-text for each image. <br />
<br />
I guess you can do this in a shareware photo-editor too.<br />
<br />
Tip: Tool tips can also be achieved by the TITLE attribute, which applies to almost all tags.<br />
<br />
-aslefo <br />
<br />
Image slicing is a good method if you are going to use some type of mouseover effect (like swapping images), otherwise stick with one image and use an image map. You can figure the coordinates with just about any image editor if you don't have a program that will map it for you.<br />
<br />
Regards,<br />
Kevin<!--content-->You can use Paint shop Pro 7 to use image mapper on photos...........<br />
<br />
its a very easy programme and has tutorial on how to use the tools.........<br />
<br />
you can get a trial CD from a magazine called webpages made easy here in the U.K. It usually comes with some great web editor tools or maybe you can Download <!--more--> paint shop pro 7...........from the web.........<br />
<br />
hope this helps..........<br />
<br />
Susan<!--content-->I just make one big image and then using great little program called "Mapedit" I make the map.<br />
<br />
Here is the link (they have a 30day free trial):<br />
<!-- m --><a class="postlink" href="http://www.boutell.com/mapedit/">http://www.boutell.com/mapedit/</a><!-- m --><!--content-->...it does benefit your visitors if you've "sliced" up the image first. That way, if the image is fairly large, it won't appear empty the whole time it's loading. You'll get the smaller pieces in one by one, and cut down on the page load time. It's really not a complicated thing at all to subsequently set up the table for each piece of the image.<br />
<br />
Then, if all you're looking for is that "alt" text that shows up when you hold your mouse over an image, it's very simple to just do that. If you're looking for a javascript function, I can suggest the following:<br />
<br />
It's called "overlib" and can be Download <!--more-->ed from here (at least it could be Download <!--more-->ed a few months ago - I haven't checked lately): <!-- m --><a class="postlink" href="http://www.bosrup.com">http://www.bosrup.com</a><!-- m --><br />
<br />
You can see the script in action here: <!-- m --><a class="postlink" href="http://www.bowlzilla.com/balls/brunswick/BRXZNH.html">http://www.bowlzilla.com/balls/brunswick/BRXZNH.html</a><!-- m --> and hover your mouse over one of the three description links titled "Track Flare Potential", "Hook Potential" or "Length". However, I don't know for certain that this works for images. I can't imagine why it wouldn't though.<br />
<br />
Good luck.<br />
<br />
Laura<!--content-->what if you have a map, and certain areas are 'hot' spots. Obviously these areas aren't going to be all square, nor will they fit into a tabled format very easily. Using an imagemap would allow for the tooltips in a much easier fashion. <br />
<br />
One disadvantage of slicing up a image, is that some parts of the image may not Download <!--more-->... then what do you do? Hit reload and hope they all load? I have seen it happen a lot, on good servers, during peak times. I am not a big fan of image slicing.<!--content-->Better to have one part left out than the entire image, during peak times :D<!--content-->Heres a way!<br />
<br />
PaintShop Pro v7 includes an Image Mapper tool for creating quick and easy image maps. Simply open your image in PaintShop Pro and choose File, Export, Image Mapper. The Image Mapper dialog will appear. Here you can select and draw hotspots on your image, set the link information as well as the target and ALT text for each hotspot. When you click Save, the image will be saved and an HTML file will be created with the image map code in it.<!--content-->I sssoooo need to get that program (PSP 7). I just haven't got around to it yet. I have used PSP 6 at school and like it a lot but need the newest and best. Does anyone know when the next version is due out? I should probably check their website.<!--content-->Most probably, they do not announce their updating plans publicly on their website, at least not until it is expected very shortly. The best chance on getting yhis info, is probably by asking their customer-service by email.<br />
<br />
-aslefo<!--content-->10-4.<!--content-->For this purpose, using a imagemap would be appropriate. <br />
<br />
Slicing images leads to using large amounts of graphics per page... thus slowing Download <!--more--> time. <br />
<br />
Take a look at pages made with the dreamweaver/ fireworks combo. Lots of graphics, sliced up...... huge filesize, slow Download <!--more--> time. Sure it looks great...... if it ever loads!<!--content-->Originally posted by prodeveloping <br />
I sssoooo need to get that program (PSP 7). I just haven't got around to it yet. I have used PSP 6 at school and like it a lot but need the newest and best. Does anyone know when the next version is due out? I should probably check their website. I got it, but unfortunately I don't really used it. Installed it and took it out. Still prefer Adobe pohotshop 6 for graphics.<!--content-->
 
Back
Top