473,378 Members | 1,334 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,378 software developers and data experts.

How to display text on a image at various locations

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
12 1552
acoder
16,027 Expert Mod 8TB
You can use the map/area tags with the title attribute. Not necessary to use JavaScript.
Nov 3 '08 #2
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
16,027 Expert Mod 8TB
See this link (MAP tag) - adapt it to your requirements.
Nov 3 '08 #4
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
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
427 Expert 256MB
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
16,027 Expert Mod 8TB
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
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
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
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
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
16,027 Expert Mod 8TB
Please post the team.jpg image. If you'd rather not post on a public forum, PM me instead.
Nov 15 '08 #13

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

Similar topics

4
by: Paul LeBlanc | last post by:
I have some images that move positions fine using onmousedown or onmousemove to feed a function the coordinates. It doesn't work when I plug it into conditional loops with setTimeout to set the...
2
by: Graham J | last post by:
Hello, Apologies for the somewhat wordy and garbled subject as I couldn't think how to phrase it and this has hindered my searching for any previous answers. It could be a really simple...
21
by: Dan V. | last post by:
I have tried a number of things including preloading, but the background image (water tile in header) in IE 6 will not display where other browsers will....
2
by: Shabam | last post by:
I have a dotnet application and it allows users to store images. These images are partitioned by directories so as to prevent overflow of files in any specific folder. However, for scalability...
2
by: Mamatha | last post by:
Hi I want to add an icon to the textbox's text. I don't know how to display icon in textbox in VB.NET. If any one knows please let me know. Thanks in advance. Mamatha
5
by: Peter Lapic | last post by:
I have to create a image web service that when it receives an imageid parameter it will return a gif image from a file that has been stored on the server. The client will be an asp.net web page...
3
by: den 2005 | last post by:
Hi everyone, Here is code working on..Trying to insert record with a column with Image or VarBinary datatype in sql database from a existing jpeg image file, then retrieve this image from...
3
by: Dave Keen | last post by:
Hi all. Hope you can help me. This should be easy but I can't make this work. In brief I am building a page of thumbnails using images held in a SQLServer 2000 database. I do this by creating...
4
by: sarika | last post by:
Hi all I want to create an online stamp making site. In my site a user select a template from number of templates for making his stamp. The template is and image with some graphics and text. Now...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.