Thread: images-maps
Results 1 to 15 of 19
Related
-
image maps..what should i target links to?? Forum: HTML Forum
Replies: 1 -
image maps and Firefox Forum: HTML Forum
Replies: 2 -
CSS and Image Maps Forum: CSS Forum
Replies: 7
-
11-04-2007, 06:30 AM #1
images-maps
hello friends,
i visited the website http://milliondollarhomepage.com
i was astonished how he inserted images in specific region.
they have used maps. but how do we incorporate images in to that places.
what are the steps followed?
does any body know?
Thank you
-
11-05-2007, 12:12 PM #2bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
Re: images-maps
Hi there ravindarjobs,
and a warm welcome to these forums.
- You start with a grid as shown in the attachment, but 100 x 100 instead of 10 x 10.
- This would give you a grid of 1000 pixels by 1000 pixels.
- The images are sized to multiples of ten pixels.
- The smallest image possible would be 10 pixels by 10 pixels - ( one small square).
- Each image would then be positioned absolutely in its required place on the grid.
- This would be your master copy.
- Now use Print Screen to copy the grid with the positioned image.
- Paste into an image editor and save as a .jpg.
- This would be the the image that would be used for the image map.
- As each image is added to the grid, add the appropriate area code to the map.
- Have a beer at this point.
- Repeat the process until the grid is completely filled or you are totally inebriated.
I hope that this helps.
-
11-05-2007, 01:17 PM #3
Re: images-maps
Many thanks friend.
i have been waiting for the reply with my eyes opened.
now i got a clear idea of the procedure followed.
initially how do we create grids?
using an image editor?
if so can you give me one example?
Thank you.
-
11-05-2007, 03:14 PM #4bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
Re: images-maps
Hi there ravindarjobs,
check ou the attachment for a 100x100 - (1000px by 1000px) - grid .gif.
It may look a little odd when first viewed but when zoomed it will look OKLast edited by coothead; 11-05-2007 at 03:31 PM.
-
11-05-2007, 03:48 PM #5bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
Re: images-maps
Hi there ravindarjobs,
I forgot to mention that it took 10,001 divs to create that grid.
-
11-05-2007, 09:50 PM #6
Re: images-maps
oh many thanks frnd.
also one more doubt,
can we divide an image into grids?
i.e i want the grid lines appear on the image.
can we put grid lines on an image?
-
11-05-2007, 10:55 PM #7
Re: images-maps
dear friend,
just for a test i have run this code in IE6.
it ran well.
but when i open the page with Firefox browser,
it does,nt show any image except a small dot.
<html>
<head>
<title>Untitled</title>
</head>
<body>
<img src="E:\images\grid.gif" align=center>
</body>
</html>
-
11-06-2007, 05:25 AM #8
Re: images-maps
dear friend,
Can we have an image divided into grids?
Thank you
-
11-06-2007, 10:13 AM #9bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
Re: images-maps
Hi there ravindarjobs,
Can we have an image divided into grids?
http://mysite.orange.co.uk/azygous/bits.html
Have you now resolved your problem with Firefox?
If you say that the image displays OK in IE6, then I can see no reason why it you should not display OK in Firefox also.Last edited by HTML; 03-09-2012 at 10:33 AM.
-
11-06-2007, 12:43 PM #10
Re: images-maps
friend,
i am happy that you understood my requirement easily. Thank you.
Yes that link exactly shows my requirement.
but we should be able to define the size of each piece and distance between each piece.
how can we do that?
Firefox did not run that code well. it did not display the image.Last edited by ravindarjobs; 11-06-2007 at 12:55 PM.
-
11-06-2007, 01:40 PM #11
Re: images-maps
dear friend,
i have tried my sample code with Opera too.
but Opera also did not render image.
But ony IE rendered the image?
whats wrong in my code?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<img src="E:\images\u.jpg" height=1000 width=1000 align=center usemap="#map1">
<map id="map1" name="map1">
<area shape ="rect" color=red coords =20,10,10"
href ="http:\\yahoo.com" target ="_blank"
alt="Sun" />
</map>
</body>
</html>
Thank you
-
11-06-2007, 02:56 PM #12bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
Re: images-maps
Hi there ravindarjobs,
But we should be able to define the size of each piece and distance between each piece.
How can we do that?
Code:#container { width:550px; /*this is the total width of the pieces, borders and margins*/ margin:4px auto; } .bits { width:100px; height:100px; /*these are the piece dimensions*/ overflow:hidden; border:1px solid #fff; float:left; display:inline; margin:4px; /*this is half the margin between the pieces*/ }
I have tried my sample code with Opera too.
but Opera also did not render image.
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> #grid { text-align:center; } #grid img { width:1000px; height:1000px; border:0 solid; } </style> </head> <body> <div id="grid"> <img src="E:\images\u.jpg" usemap="#map1" alt=""> <map id="map1" name="map1"> <area shape ="rect" coords="20,10,30,20" href="http:\\yahoo.com" target="_blank" alt="Sun"> </map> </div> </body> </html>
-
11-07-2007, 09:00 AM #13
Re: images-maps
hi friend,
ok i will write css code.
thank you
also i will test my previous code again in firefox and opera.Last edited by ravindarjobs; 11-07-2007 at 09:04 AM.
-
11-08-2007, 08:21 AM #14
Re: images-maps
hi friend,
i am panic.
just for a test i have run the following code in firefox and IE6. Even this small code is not running well in firefox but runs well in IE6.
<html>
<head><title>hello</title>
</head>
<body>
<center>
<Img src="C:\Images\u.jpg"">
</body>
</center>
</html>
what could be the problem?
-
11-08-2007, 11:35 PM #15
Re: images-maps
sorry typing mistake in previous post.
the correct code is
<html>
<head><title>hello</title>
</head>
<body>
<center>
<Img src="C:\Images\u.jpg">
</center>
</body>
</html>