125 users online (0 members and 125 guests)  

> > > > images-maps

Thread: images-maps


Page 1 of 2 1 2 Last
  Results 1 to 15 of 19

Related

  1. image maps..what should i target links to??    Forum: HTML Forum
    Replies: 1
  2. image maps and Firefox    Forum: HTML Forum
    Replies: 2
  3. CSS and Image Maps    Forum: CSS Forum
    Replies: 7
  1. 11-04-2007, 06:30 AM #1
    ravindarjobs
    ravindarjobs is offline
    ravindarjobs's Avatar
    Junior Member
    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    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
    Reply With Quote Reply With Quote
  2. 11-05-2007, 12:12 PM #2
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    733

    Re: images-maps

    Hi there ravindarjobs,

    and a warm welcome to these forums.
    1. You start with a grid as shown in the attachment, but 100 x 100 instead of 10 x 10.
    2. This would give you a grid of 1000 pixels by 1000 pixels.
    3. The images are sized to multiples of ten pixels.
    4. The smallest image possible would be 10 pixels by 10 pixels - ( one small square).
    5. Each image would then be positioned absolutely in its required place on the grid.
    6. This would be your master copy.
    7. Now use Print Screen to copy the grid with the positioned image.
    8. Paste into an image editor and save as a .jpg.
    9. This would be the the image that would be used for the image map.
    10. As each image is added to the grid, add the appropriate area code to the map.
    11. Have a beer at this point.
    12. Repeat the process until the grid is completely filled or you are totally inebriated.

    I hope that this helps.
    Attached Images Attached Images
    Reply With Quote Reply With Quote
  3. 11-05-2007, 01:17 PM #3
    ravindarjobs
    ravindarjobs is offline
    ravindarjobs's Avatar
    Junior Member
    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    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.
    Reply With Quote Reply With Quote
  4. 11-05-2007, 03:14 PM #4
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    733

    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 OK
    Attached Images Attached Images
    Last edited by coothead; 11-05-2007 at 03:31 PM.
    Reply With Quote Reply With Quote
  5. 11-05-2007, 03:48 PM #5
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    733

    Re: images-maps

    Hi there ravindarjobs,

    I forgot to mention that it took 10,001 divs to create that grid.
    Reply With Quote Reply With Quote
  6. 11-05-2007, 09:50 PM #6
    ravindarjobs
    ravindarjobs is offline
    ravindarjobs's Avatar
    Junior Member
    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    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?
    Reply With Quote Reply With Quote
  7. 11-05-2007, 10:55 PM #7
    ravindarjobs
    ravindarjobs is offline
    ravindarjobs's Avatar
    Junior Member
    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    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>
    Reply With Quote Reply With Quote
  8. 11-06-2007, 05:25 AM #8
    ravindarjobs
    ravindarjobs is offline
    ravindarjobs's Avatar
    Junior Member
    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    Re: images-maps

    dear friend,

    Can we have an image divided into grids?
    Thank you
    Reply With Quote Reply With Quote
  9. 11-06-2007, 10:13 AM #9
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    733

    Re: images-maps

    Hi there ravindarjobs,
    Can we have an image divided into grids?
    Do you mean something like this example...
    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.
    Reply With Quote Reply With Quote
  10. 11-06-2007, 12:43 PM #10
    ravindarjobs
    ravindarjobs is offline
    ravindarjobs's Avatar
    Junior Member
    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    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.
    Reply With Quote Reply With Quote
  11. 11-06-2007, 01:40 PM #11
    ravindarjobs
    ravindarjobs is offline
    ravindarjobs's Avatar
    Junior Member
    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    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
    Reply With Quote Reply With Quote
  12. 11-06-2007, 02:56 PM #12
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    733

    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?
    This would be done in the CSS...
    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.
    I tested this code - (using my grid image, of course) - and it worked OK in IE 6, IE 7 Firefox 2 and Opera 9....
    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>
    Reply With Quote Reply With Quote
  13. 11-07-2007, 09:00 AM #13
    ravindarjobs
    ravindarjobs is offline
    ravindarjobs's Avatar
    Junior Member
    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    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.
    Reply With Quote Reply With Quote
  14. 11-08-2007, 08:21 AM #14
    ravindarjobs
    ravindarjobs is offline
    ravindarjobs's Avatar
    Junior Member
    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    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?
    Reply With Quote Reply With Quote
  15. 11-08-2007, 11:35 PM #15
    ravindarjobs
    ravindarjobs is offline
    ravindarjobs's Avatar
    Junior Member
    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    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>


    Reply With Quote Reply With Quote
Page 1 of 2 1 2 Last
« Previous Thread | Next Thread »

Tags for this Thread