By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,741 Members | 1,979 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,741 IT Pros & Developers. It's quick & easy.

How to display text on a image at various locations

P: 52
Hi,
I have gone through the thread13362.html which is similar to my problem. I have a image which is a group photograph of our team. I want to display respective name on mouse over to the particular person. Even it is displayed at bottom of the image in a separate div will also do. Kindly help me out in this regard . right now i do not have any code for this.
Regards
Naveen
Nov 3 '08 #1
Share this Question
Share on Google+
12 Replies


acoder
Expert Mod 15k+
P: 16,027
You can use the map/area tags with the title attribute. Not necessary to use JavaScript.
Nov 3 '08 #2

P: 52
You can use the map/area tags with the title attribute. Not necessary to use JavaScript.
Please send me sample code if any
Nov 3 '08 #3

acoder
Expert Mod 15k+
P: 16,027
See this link (MAP tag) - adapt it to your requirements.
Nov 3 '08 #4

P: 52
See this link (MAP tag) - adapt it to your requirements.
Thank You for your idea i will try to do stuff and get back to you
Nov 4 '08 #5

P: 52
Thank You for your idea i will try to do stuff and get back to you
Hi,
I have tried to adopt the MAP /AREA Tags but it is coming out with as per my requirement. My Requirement is only from left side alt text is to be changed .
I have some code for you please go through it and help me out to get perfect output.One more thing, if we place image any where on web page respective coordinates adjust accordingly?
[HTML]<HTML>
<HEAD>
<TITLE>Team</TITLE>

</HEAD>

<BODY>
<div id="content_4" class="content">
<div class="team" alt="Our Team">
<img src="team.jpg" usemap="#teammap" class="team" height="225" width="410"/>
</div>
</div>

<MAP id= "#teammap" name="teammap">
<AREA shape="rect" alt=" One" coords="0,5,288,241"/>
<AREA shape="rect" alt=" Two" coords="3,5,288,241" />
<AREA shape="rect" alt=" Three" coords="6,5,288,241" />
<AREA shape="rect" alt="Four" coords="9,5,288,241" />
<AREA shape="rect" alt="Five" coords="12,5,288,241" />
<AREA shape="rect" alt="Six" coords="15,5,288,241" />
<AREA shape="rect" alt="Seven" coords="18,5,288,241" />
<AREA shape="rect" alt="Eight" coords="21,5,288,241" />
<AREA shape="rect" alt="Nine" coords="24,5,288,241" />
</MAP>
</BODY>
</HTML>[/HTML]
Thanks
Naveen
Nov 7 '08 #6

rnd me
Expert 100+
P: 427
you should use title, not alt for cross browser compatibility.

>>"if we place image any where on web page respective coordinates adjust accordingly?"
the pixel coords are relative to the image.
the image's position on the page is not important.
Nov 7 '08 #7

acoder
Expert Mod 15k+
P: 16,027
Use the title attribute rather than the alt attribute.
My Requirement is only from left side alt text is to be changed .
I'm not sure what you mean here. Can you elaborate?

Edit: sorry, I didn't notice your reply, rnd me.
Nov 7 '08 #8

P: 52
Hi,
I have tried to adopt the MAP /AREA Tags but it is coming out with as per my requirement. My Requirement is only from left side alt text is to be changed .
I have some code for you please go through it and help me out to get perfect output.One more thing, if we place image any where on web page respective coordinates adjust accordingly?
[HTML]<HTML>
<HEAD>
<TITLE>Team</TITLE>

</HEAD>

<BODY>
<div id="content_4" class="content">
<div class="team" alt="Our Team">
<img src="team.jpg" usemap="#teammap" class="team" height="225" width="410"/>
</div>
</div>

<MAP id= "#teammap" name="teammap">
<AREA shape="rect" alt=" One" coords="0,5,288,241"/>
<AREA shape="rect" alt=" Two" coords="3,5,288,241" />
<AREA shape="rect" alt=" Three" coords="6,5,288,241" />
<AREA shape="rect" alt="Four" coords="9,5,288,241" />
<AREA shape="rect" alt="Five" coords="12,5,288,241" />
<AREA shape="rect" alt="Six" coords="15,5,288,241" />
<AREA shape="rect" alt="Seven" coords="18,5,288,241" />
<AREA shape="rect" alt="Eight" coords="21,5,288,241" />
<AREA shape="rect" alt="Nine" coords="24,5,288,241" />
</MAP>
</BODY>
</HTML>[/HTML]
Thanks
Naveen
For the above mentioned size image i want to set coordinates which should be from left side of the image to 5px gap towards right side. From Top, Bottom position will be same. Help me how to do it?
Nov 10 '08 #9

P: 52
Use the title attribute rather than the alt attribute.I'm not sure what you mean here. Can you elaborate?

Edit: sorry, I didn't notice your reply, rnd me.
Ok i will impliment title attribute in my code. Just i want to set coordinates for left and right side of the image where 5px gap is to be maintained between each position on the image.Just help me out?
Nov 10 '08 #10

P: 52
Use the title attribute rather than the alt attribute.I'm not sure what you mean here. Can you elaborate?

Edit: sorry, I didn't notice your reply, rnd me.
Please have a look at the modified code which is also not coming up properly:Requirement is One to Nine from left to right it should display. Pls tell me where i am going wrong.
Thanks:

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><HTML>
<HEAD>
<TITLE>TEAM </TITLE>
</HEAD>

<BODY>

<div class="team" usemap="#team" alt="410 Station IT Team">
<img src="team.jpg" class="team" usemap="#teammap" height="225" width="410" />
</div>


<MAP id= "teammap" name="teammap">
<AREA shape="rect" title="One" coords="45,60,365,165"/>
<AREA shape="rect" title="Two" coords="85,60,325,165" />
<AREA shape="rect" title="Three" coords="120,60,290,165" />
<AREA shape="rect" title="Four" coords="170,60,240,165" />
<AREA shape="rect" title="Five" coords="215,60,195,165" />
<AREA shape="rect" title="Six" coords="255,60,155,165" />
<AREA shape="rect" title="Seven" coords="300,60,110,165" />
<AREA shape="rect" title="Eight" coords="345,60,65,165" />
<AREA shape="rect" title="Nine" coords="390,60,20,165" />
</MAP>
</BODY>
</HTML>[/HTML]
Nov 10 '08 #11

P: 52
Please have a look at the modified code which is also not coming up properly:Requirement is One to Nine from left to right it should display. Pls tell me where i am going wrong.
Thanks:

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><HTML>
<HEAD>
<TITLE>TEAM </TITLE>
</HEAD>

<BODY>

<div class="team" usemap="#team" alt="410 Station IT Team">
<img src="team.jpg" class="team" usemap="#teammap" height="225" width="410" />
</div>


<MAP id= "teammap" name="teammap">
<AREA shape="rect" title="One" coords="45,60,365,165"/>
<AREA shape="rect" title="Two" coords="85,60,325,165" />
<AREA shape="rect" title="Three" coords="120,60,290,165" />
<AREA shape="rect" title="Four" coords="170,60,240,165" />
<AREA shape="rect" title="Five" coords="215,60,195,165" />
<AREA shape="rect" title="Six" coords="255,60,155,165" />
<AREA shape="rect" title="Seven" coords="300,60,110,165" />
<AREA shape="rect" title="Eight" coords="345,60,65,165" />
<AREA shape="rect" title="Nine" coords="390,60,20,165" />
</MAP>
</BODY>
</HTML>[/HTML]
Please help me out to close this issue
Nov 15 '08 #12

acoder
Expert Mod 15k+
P: 16,027
Please post the team.jpg image. If you'd rather not post on a public forum, PM me instead.
Nov 15 '08 #13

Post your reply

Sign in to post your reply or Sign up for a free account.