|
HTML - Newbie's Problem With Image Mapping
I have been experimenting with a new page setup and I've got a problem I just can't figure out. Anyway, I have an image mapped for navigation on the left-hand side of the page/table. It seems to work fine and everything is fine up to this point.
Now I am trying to add another navigational map to the image at the top of my page and when I code it, the map seems to work fine, but either the images or the table gets thrown off and I just can't figure out why it's doing it or how to fix it. The code for the top image map is as follows: <body bgcolor="#000000" text="000000" topmargin="0" leftmargin="0"> <div align="center"> <table border="0" cellpadding="0" cellspacing="0" width="600" height="770"> <tr> <td width="600" height="150" colspan="3"> <img src="http://vance.thebams.org/junk/images/new images/topbg.jpg" usemap="#topmap" border="0"></td> <map id="topmap" name="topmap"> <area shape="rect" coords="51,98,107,119" href="index.html"/> <area shape="rect" coords="121,99,218,119" href="bookkeeping.html"/> <area shape="rect" coords="232,99,357,119" href="payroll.html"/> <area shape="rect" coords="371,99,457,119" href="web.html"/> <area shape="rect" coords="474,98,607,119" href="personal.html"/> <area shape="rect" coords="621,98,710,119" href="contact.html"/> </map> </tr> The page that shows exactly how I want the page to look without the map at the top of the page can be seen here. When I add the image map at the top of the page it ends up looking like this. You'll notice that the area around the pen's tip is off. If anyone has any suggestions as to what I did wrong and how to fix it, I would greatly appreciate it. Thanks, Vance Similar TutorialsI have a problem in implementing image mapping in mouse-over image. Please help in solving this problem. The code which is working for image mapping Code: <html> <head> <title>Untitled Document</title> </head> <body> <img src="images/planetgroup.jpg" alt="Planets" usemap=#planetmapping border=0></img> <map name="planetmapping"> <area shape="rect" coords="559,0,612,60" href="http://www.yahoo.co.in/"> <area shape="rect" coords="504,0,561,60" href="http://www.yahoo.co.in/"> <area shape="rect" coords="449,0,507,60" href="http://www.yahoo.co.in/"> <area shape="rect" coords="395,0,451,60" href="http://www.yahoo.co.in/"> <area shape="rect" coords="340,0,397,60" href="http://www.yahoo.co.in/"> <area shape="rect" coords="292,0,342,60" href="http://www.yahoo.co.in/"> <area shape="rect" coords="236,0,297,60" href="http://www.yahoo.co.in/"> <area shape="rect" coords="194,0,238,60" href="http://www.yahoo.co.in/"> <area shape="rect" coords="148,0,196,60" href="http://www.yahoo.co.in/"> <area shape="rect" coords="1,0,49,60" href="http://www.google.co.in/"> <area shape="rect" coords="47,0,103,60" href="http://www.yahoo.co.in/"> <area shape="rect" coords="99,0,150,60" href="http://www.yahoo.co.in/"> </map> </body> </html> But The code after using in mouse-over which needs help Code: <html> <body> <div style="position:absolute; left: 200px; top: 180px; z-index:1"><img src="images/solarsystem.gif" alt="Solar System" height="60" onMouseOver="this.src='images/planetgroup.jpg'; usemap=#planetmapping" onMouseOut="this.src='images/solarsystem.gif';"></img></div> <map name="planetmapping"> <area shape="rect" coords="559,0,612,60" href="http://www.yahoo.co.in/"> <area shape="rect" coords="504,0,561,60" href="http://www.yahoo.co.in/"> <area shape="rect" coords="449,0,507,60" href="http://www.yahoo.co.in/"> <area shape="rect" coords="395,0,451,60" href="http://www.yahoo.co.in/"> <area shape="rect" coords="340,0,397,60" href="http://www.yahoo.co.in/"> <area shape="rect" coords="292,0,342,60" href="http://www.yahoo.co.in/"> <area shape="rect" coords="236,0,297,60" href="http://www.yahoo.co.in/"> <area shape="rect" coords="194,0,238,60" href="http://www.yahoo.co.in/"> <area shape="rect" coords="148,0,196,60" href="http://www.yahoo.co.in/"> <area shape="rect" coords="1,0,49,60" href="http://www.google.co.in/"> <area shape="rect" coords="47,0,103,60" href="http://www.yahoo.co.in/"> <area shape="rect" coords="99,0,150,60" href="http://www.yahoo.co.in/"> </map> </body> </html> So, I'm a complete amateur at HTML, and need help. <html> <img src="http://i43.tinypic.com/35k0r3c.png" width="1350" border="0" usemap="#imap_55" > <map id="imap_55" name="imap_55" > <area shape="rect" coords="9,12,94,95" alt="P2W360's Profile" title="P2W360's Profile" href="http://live.xbox.com/en-US/MyXbox/Profile?GamerTag=P2W360"> </map> </html> * { outline: none; -moz-outline: none; } .clear{ clear:both; height:1px; margin-bottom:-1px; } body{ background: #000 url(http://i43.tinypic.com/35k0r3c.png) center center fixed no-repeat; {block:IfBackgroundImage} background: #000 url('{image:Background}') top left fixed; {/block:IfBackgroundImage} color:#fff; font-size:11px; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Geneva, Verdana, sans-serif ; text-shadow: #000 0px 1px 0px; } WHY WON'T IT WORK EDIT: I'm using tumblr if that's any use. Hey there, first post on this forum so nice to meet you all.. I have a problem with placing an image that has been image mapped. Its either, I have the image in the right place but without the image maps, or in the wrong place with the image maps.. headwrecker! My girlfriends brother persuaded me to box him off a proper band myspace and with the persuasive power of a crate of lager i agreed.. so here is what i have scrapped together... http://www.myspace.com/thecommitments52 (nb: this is only a test page for myself...) You see the main image header and the three white tabs: add, message and comment.. I am using a div style to keep the image header where I want it... Here is a seperate piece of html away from the main piece of html with the image mapped and ready to go: Quote: <map name='Map1'> <area shape='polygon' href='http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendId=423424063' alt='' title='' coords='543,181 668,145 679,178 553,218' /> <area shape='polygon' href='http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=423424063' alt='' title='' coords='502,252 745,236 747,274 503,287' /> <area shape='polygon' href='http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=423424063' alt='' title='' coords='455,297 694,359 687,395 446,332' /> </map> <img border='0' usemap='#Map1' src='http://h1.ripway.com/palefountain/png.png' alt='' /> here is the main HTML i insert into the myspace section: Code: <style>
{!- make room at bottom of div.profileWidth -!}
div.profileWidth table {margin-bottom:518px !important;}
{! apply banner as bkgd image !}
div.profileWidth{background-image:url(http://h1.ripway.com/palefountain/png.png)!important; background-position:center bottom !important; background-repeat:no-repeat !important;}
{!- reverse -!}
table.rail, .i, .i i.x {display:none;}
</style>
<style>
body {
font-size: 1px; line-height: 1px; font-family: Verdana, Arial, sans-serif;
background-color:transparent;
background-image:url(http://h1.ripway.com/palefountain/newbg.gif );
background-attachment: fixed;
background-position: bottom left;
background-repeat: no-repeat;
margin-top:10px;
padding-left: 0px;
}
p {margin: 0px 0px 1em 0px; font-family: Verdana, sans-serif !important}
a, a:link, a:visited {color:ff0000; text-decoration: none;}
a:hover {color:52f6f5; text-decoration: none}
img {border: none}
br {line-height: 10px;}
u {text-decoration: none; }
table table table br { line-height:15px; }
* html table table table.latestBlogEntry br { line-height:0; }
form {border-width:0px;background-color:none;}
input {background-color:transparent !important}
body>div {margin-left: 10px;}
table { border:1px solid red;}
table, tr, td, table table, table table td {border-width:0px; background-color: transparent;}
table table table td {background-color:transparent;margin:0px;padding:0; vertical-align:top ! important;}
* html table table table td {padding: 0 0px 0px 0px;}
table table table table {border-width:0px; background-color: transparent; margin:0px; padding:0px; background-image: none;}
table table table table table{ border-color:ffffff;}
table table table table td {padding:0px 0;margin:0px; }
table table table table table td { padding:0 0px 0 0;}
table table table {
margin:0px;
max-width: 435px;
width: 100% !important;
padding: 0 12px 14px 12px;
}
* html table table table { padding:0;}
body td table, body div table {margin-top: 0;}
font {color:386093;font-size:10px}
a font:hover {color:53f9e1}
a.navbar:link, a.navbar:visited {color:ff0000}
a.navbar:hover {color:53f9e1}
table tr td table tr td font {display: inline;}
table tr td table a.navbar {font-size: 10px;}
.text {color:000000;font-size:11px}
a.text:link, a.text:visited {color:ff0000}
a.text:hover {color:53f9e1}
* html .nametext, * html .whitetext12 { width:298px; }
.NOTES { content:"firefox hack to make tables not to have a huge gap"; }
td.text {text-align:left;}
.r{}
body {
background-color: 000000;
}
table table table {
border-width: 1;
border-style: solid;
border-color: 000000;
background-color: ffffff;
filter: alpha(opacity=90);
-moz-opacity: 0.90;
opacity:0.90;
-khtml-opacity:0.90;
}
table table table table {filter:none !important; opacity:1 !important; }
.r{}
.contactTable {
width: 300px !important;
height: 150px !important;
padding: 0px !important;
background-image:url(http://h1.ripway.com/palefountain/contact.jpg);
background-attachment: scroll;
background-repeat: no-repeat;
}
.contactTable table, table.contactTable td {
padding: 0px !important;
border: 0px;
background-image: none;
}
.contactTable a img {
visibility: hidden;
padding: 2px !important;
}
.contactTable .text {
font-size: 17px !important;
}
.contactTable .text, .contactTable a, .contactTable img {
filter: none !important;
}
.contactTable .whitetext12 {
display: none;
}
.r{}
.r{}
body, table table tr td, table table div, li, p, .redtext, .blacktext10, .text, a.text:link, a.text:visited,
a.searchlinksmall, a.searchlinkSmall:hover, a.searchlinksmall:link, a.searchlinksmall:visited,
.lightbluetext8, a, a:link, a:visited, a.redlink:link, div, font, a.navbar:link, a.navbar:visited
{
color: 000000;
font-size:11;
}
a.searchlinksmall, a.searchlinksmall:link, a.searchlinksmall:visited { font-weight:normal;}
.r{}
.nametext, .whitetext12, .orangetext15, .btext, .redbtext, .blacktext12, table.userProfileURL strong {
margin: 0px 0px 0px 0px;
color: 000000;
font-size:10;
font-family: Trebuchet MS, sans-serif;
font-weight:bold;
}
.whitetext12 { margin-top:0; }
.r{}
span.blacktext12 {
padding-bottom:;
visibility: visible !important;
background-repeat: no-repeat;
font-size: px;
text-transform: uppercase;
letter-spacing: px;
width: ;
height: ;
display: block !important;
background-image:url();
}
.blacktext12 { text-align:center; margin-top:0px;}
.nametext, .whitetext12, .orangetext15, .btext, table.userProfileURL strong {
padding-top: 2;
padding-right:2;
padding-bottom:2;
padding-left:4;
border-style: none;
}
.nametext {
font-size:10;
font-family: Trebuchet MS, sans-serif;
background-color:transparent;
}
.r{}
.lightbluetext8 {
color: 000000;
font-size:10;
font-weight:normal;
}
.r{}
.r{}
a, a:link, a:visited, a.redlink:link, a.redlink:visited, a.navbar:link, a.navbar:visited, a.text:link, a.text:visited, a.text:hover {
color: ff0000;
font-size:10;
font-weight:normal;
text-decoration:none;
}
a.navbar:link, a.navbar:visited, a.text:link, a.text:visited, a.text:hover {
}
a:hover, a.redlink:hover, a.navbar:hover, a.text:hover {
color: 53f9e1;
font-size:10;
font-weight:normal;
text-decoration:underline;
}
a.navbar:hover, a.text:hover {
}
.NOTES { content:'make font smaller for friends comments box';}
a.navbar:link, a.navbar:visited, a.navbar:hover, a.text:link, a.text:visited, a.text:hover { font-weight:normal; font-size:9px;}
*html table table table { height: .01%; }
table, td { padding: 0px; }
table table table { height: .01%; width: 100%; padding: 0px; }
table table table table { padding: 0px; }
table table table table table { padding: 0px;}
table table table table table table { padding: 0px;}
td.text td.text table table table td {padding:0px 6px 0px 6px !important; }
* html .contactTable, *html .userProfileURL {width: 300px !important;}
</style>
If someone can just point me in the right direction, or better yet implement the/a code that will keep the banner where i want it plus having the image maps, i would be over the moon as this little thing is really getting on my nerves !haah! Oh yes, also... Instead of imape mapping I tried to play a sneaky little trick by laying a transparent clickable div layer over the buttons in the image but they change position in every browser and different screen resolutions so no good! Thank you in advance for any advice... Hi Friends I got a problem when using image mapping in html using dream weaver.While we map some area in the image it automatically gives co-ordinates in the code and if the window size is changed, the mapping area changed.How to give relative position to the image map not depending on the co-ordinates. Hoping that i will get reply from u soon............... Regards, Padmaja.M. Wow, this site has been SUPER helpful to me So, now that I have my background color and image and all of the fun stuff, I would like to do background mapping. I have the code for the mapping but I do not know how to post it in conjunction w/what background code I am already using. This is the code that I am currently using: <body style="background-image:url(http://i17.photobucket.com/albums/b9...osition:center center;background-attachment:fixed> <body bgcolor="FFFF66"> ----------------------------------------------- And below is the mapping code that I got from another site (I haven't put any of my info into it, yet) I just need to know about the placement of the code.......... Can anyone help ----------------------------------------------- <img src ="planets.gif" width ="145" height ="126" alt="Planets" usemap ="#planetmap" /> <map id ="planetmap" name="planetmap"> <area shape ="rect" coords ="0,0,82,126" href ="sun.htm" target ="_blank" alt="Sun" /> <area shape ="circle" coords ="90,58,3" href ="mercur.htm" target ="_blank" alt="Mercury" /> <area shape ="circle" coords ="124,58,8" href ="venus.htm" target ="_blank" alt="Venus" /> </map> I tried to map an image, but it only partially worked. This is my code HTML Code: <img src="images/about-20.jpg" USEMAP="#choices">
<map name="choices">
<area shape="RECT" coords="0,93,0,70" href="gallery.html">
<area shape="RECT" coords="0.93,98,168" href="bestposters.html">
<area shape="RECT" coords="0,200,93,272" href="create.html">
</map>
The mapping only worked for the third part, the 'create.html' Here is the site this is on: www.demotivationalpictures.com Any ideas why it didn't map the first two parts of the picture? I just started learning HTML for myself, and have come across something very specific that confuses me. When filling the "coords" just how can one find EXACT coordinates of the pixels needed for each point? I understand how image mapping itself works, but when I was going to make one myself, I was lost as to how I would have the accuracy I needed. There's so many pixels of course I can't just eye them lol. But I wondered if there was a way, so I could make them as precise as needed. Thnx Hey guys. I'm having a little trouble manipulating this image the way I want to. Here's my goal: I have a large image of the city of Louisville and additional images of that are identical, but have certain regions/neighborhoods highlighted. I'm wanting to have the image displayed in full and when the user hovers over a certain area, or part of the city, then the image with that area highlighted is displayed until onMouseOut. Here's what I have so far, the onmouseover doesn't seem to be working at all. Code: <html>
<head><title>xxxx</title>
<script language="JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function mouseOver() {
document.louisville.src = "images/Louisville_Downtown.JPG";
}
function mouseOut() {
document.louisville.src = "images/Louisville_Full.JPG";
}
//--></script>
</head>
<body onLoad="MM_preloadImages('images/Louisville_Full.JPG','images/Louisville_Audubon.JPG',
'images/Louisville_Downtown.JPG','images/Louisville_Poplar_Newburg.JPG','images/Louisville_Shively.JPG','images
/Louisville_ValleyStation.JPG')">
<center>
<FONT size = "5"><B>Louisville Neighborhoods</B></FONT>
<br>
<img id="pic" src="images/Louisville_Full.JPG" alt="" usemap="#louisville" border="0" name="louisville">
<map id="louisville" name="louisville">
<area shape="rect" coords="0.000, 0.000, 7.000, 7.000" onmouseover="mouseOver()" onmouseout="mouseOut()">
</map>
</center>
</body>
</html>
The coords aren't setup correctly yet, but I'm just trying to get it to do something. Any help would be appreciated. -Tyler Hi, My latest web site developement was very heavy loaded with images, in fact probably 90% of the site is images. I decided to use image maps on most of the pages and was wondering if there are any downsides to image mapping apart from not being to good for the search engines. If anyone has any comments or advice from past experieince i would really appreciate the info CC_DESIGN So I've actually only started using HTML about four days ago. As soon as I made a website, I decided it was time. I know everyone dislikes iFrames, etc., but it's right for my site. ;D Anywho... My first problem is that I can't seem to use image maps correctly. I've done everything; I even downloaded cutemap and some other image mapping programs. I'm not quite sure what I'm doing wrong? Can anyone here correct me on my coding or my mistake? I'm a bit confused. http://amberz.webs.com/ (Just a test site.) Even though I used image map and all, you can't click on any of the links. This is the exact HTML I've been working for this index page. HTML Code: <div style="text-align:center;"><iframe src="http://i763.photobucket.com/albums/xx280/Summer-breeze/Graphics/SummerBreezeLayout.png" width="635" height="602" scrolling="auto" frameborder="0"> <body><map id="imgmap2009712214216" name="imgmap2009712214216"><area shape="rect" alt="" title="" coords="438,297,613,340" href="http://summer-breeze.webs.com/info.htm" target="_self" /><area shape="rect" alt="" title="" coords="531,343,614,366" href="http://summer-breeze.webs.com/crew.htm" target="" /><area shape="rect" alt="" title="" coords="523,370,616,403" href="http://summer-breeze.webs.com/adoptions.htm" target="_self" /><area shape="rect" alt="" title="" coords="482,405,617,436" href="http://summer-breeze.webs.com/graphics.htm" target="_self" /><area shape="rect" alt="" title="" coords="426,438,621,473" href="http://summer-breeze.webs.com/photography.htm" target="_self" /></map></body> <iframe name="I1" id="I1" src="http://www.example.com" marginwidth="1" marginheight="1" height="343" border="0" frameborder="0" style="width: 355px" scrolling="auto"> </iframe> <!--This bit is only viewed by browsers that don't support inline frames --> Your browser doesn't support inline frames. </iframe></div> Another question I have is: How can I make it so the image is fixed? I'm probably going to have a lot of content on my site, and it's a non-repetitive image, which will just look silly. http://i763.photobucket.com/albums/x...Background.png This is the image I'll be using for the sub-pages, and if I can figure out how to image map correctly, it'll include a link back home. Thank you to anyone who can help. Sorry for sounding like such a frames/HTML n00b ahaha. My goal is to create a website to display a yearbook. First I wanted to display the overall page, with imagemapping to enlarge any images on the page, whether it be a group photo, an indivdual photo...etc. Some pages could have 1 image, others could have 40 images, and not each page has the images in the same spot, so each page would require it's own image mapping. My question is how do I work around screen resolution? I would prefer to use divs and tables for % imaging, but if I do, I can't use an image map. Or is there a way to make an image map that is also based on %? The whole project will encompass about 70 pages of images. Thanks Wondering if it's possible to make a circular image change to a different image on mouseover for each of the links in the sample photo. I'm thinking this would be easy to do if the image were square and not circular. Sorry if this is in the wrong section. Is this possible and could you point me in the right direction? For those who may not know, I am trying to teach myself HTML. I have an understanding about some of the basics and now I want to expand on that. I have a navigation map pretty much set up and appears to be working so far. The problem is that when I upload it and view it in IE, the image that I am using has a blue outline around it. To me this indicates a link and it is throwing the whole look of this page off. The code I have so far is as follows: <td width="228" height="811"</td> <img src="../junk/images/a2.jpg" usemap="#navmap"/> <map id="navmap" name="navmap"> <area shape="rect" coords="2,0,243,29" href="index.htm"/> <area shape="rect" coords="1,37,243,68" href="about.htm"/> <area shape ="rect" coords="0,75,243,105" href="outsource.htm"/> <area shape="rect" coords="0,114,243,143" href="bookkeeping.htm"/> <area shape="rect" coords="0,190,243,220" href="computer.htm"/> <area shape="rect" coords="0,229,243,257" href="peachtree.htm"/> <area shape="rect" coords="0,266,243,294" href="web.htm"/> <area shape="rect" coords="0,304,243,332" href="business.htm"/> <area shape="rect" coords="1,341,243,372" a href="contact.htm"/> </map> </td> I would really like to be able to do away with the blue outline around the image so that everything flls back into place. I would appreciate it if someone could take a look at my code and suggest any corrections I need to make to fix this. Thanks for your time, Vance Does anyone know the form for hotmapping an image of the US map with the states PA, NJ, and DE? the map is called "usmap.jpeg" and the coords for a state a is PA: 453,133,458,130,461,132,504,123,510,130,508,135,513,145,505,153,461,160,455,134 If you could post the code lines for the map appearing with the PA hotspot, then I can figure out the rest of the states. Thanks you very much! (code from <body> to the end of the hotspot.) And you don't need to see the image to plant the spots. I just need the code for the image and the PA hotspot. Hello all, I hope I am not repeating any posts but all the alignment issues that I could find being talked about were with tables. I am trying to align an image with a background image to make one apparently continuous image that will repeat across the top of the page. My design works in IE 7 but not in any of the other browsers I am checking with. Netscape 8 or Chrome. I am working with Dreamweaver but have some basic knowledge of code. Here is the website as I am sure that I have not explained myself as well as I could have. http://www.americain100days.com/ Thanks all, Joey Okay. I have been experimenting and learning pretty well with the help of the experts here. But now I have run into a little problem that I can't figure out. So here I am again seeking expert help. I am using a table. In one of the columns (or cell or whatever its the proper terminology) I have an image (for my navigational map). I would like to be able to move the image up in the column. Right now it (the image map) sets much lower than other pages and I would like to have everything look uniformed. Any suggestions? To get a better idea what I am talking about, the page with the image that is low can be seen here. The way I would like it to look can be seen here. Thanks, Vance Hey Guys, I am a graphic designer and don't know much about HTML (but am taking a class and about to start a few books). I am using tumblr right now and I am try to replace the automated header ("black atom studio") with a jpg banner. Anyone know where in the HTML I would do this and what code I would need to swap in? (the website I am working at is www.blackatomstudio.com ) (not a plug, just incase you guys need to see what I am talking about) Here is the code I need help on. http://snipplr.com/view/8582/blackatoms-tumblr/ Hi, I'm a total newb. I'm trying to help someone build a basic site. The problem I'm having at the moment is that I don't understand why there is a large gap at the bottom of this page underneath the background image? I want the page to only be able to scroll down as far as the bottom of the background image (1200px from the top) Here is the page: http://helenstow-cpsychol.co.uk/about_helen.html Here is the code for the page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- TemplateBeginEditable name="doctitle" --> <title>Helen Stow - Chartered Psychologist</title> <!-- TemplateEndEditable --> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <link href="oneColFixCtr.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- body { background-image: url(images/Background_Image.gif); background-repeat: no-repeat; } --> </style></head> <body class="oneColFixCtr"> <div style="text-align:center; width:896px; margin-left:auto; margin-right:auto;"></div> <div style="text-align:center; width:840px; margin-left:auto; margin-right:auto; height: 1200px;"> <img src="images/Background_Image_Bottom.gif" alt="" width="840" height="352" hspace="1" vspace="628" border="0" align="top center" usemap="#Image-Maps_6201103231219146" id="Image-Maps_6201103231219146" /> <map id="_Image-Maps_6201103231219146" name="Image-Maps_6201103231219146"> <area shape="rect" coords="736,244,818,326" href="mailto:helenstowcpsychol@btinternet.com" alt="Email Me: helenstowcpsychol@btinternet.com" title="Email Me: helenstowcpsychol@btinternet.com" /> <area shape="rect" coords="172,244,290,326" href="http://www.bps.org.uk/" alt="http://www.bps.org.uk/" title="http://www.bps.org.uk/" /> <area shape="rect" coords="34,245,152,327" href="http://www.hpc-uk.org/" alt="http://www.hpc-uk.org/" title="http://www.hpc-uk.org/" /> <area shape="rect" coords="638,7,818,27" href="http://helenstow-cpsychol.co.uk/about_helen.html" alt="About Helen" title="About Helen" /> <area shape="rect" coords="586,47,816,67" href="http://helenstow-cpsychol.co.uk/services.html" alt="Services" title="Services" /> <area shape="rect" coords="526,87,816,107" href="http://helenstow-cpsychol.co.uk/appts_fees.html" alt="Appointments/Fees" title="Appointments/Fees" /> <area shape="rect" coords="475,128,817,148" href="http://helenstow-cpsychol.co.uk/faqs.html" alt="FAQs" title="FAQs" /> <area shape="rect" coords="422,166,816,186" href="http://helenstow-cpsychol.co.uk/links.html" alt="Links" title="Links" /> </map> </div> </body> </html> The other thing that I don't understand (but is of lesser importance) is why the 'image map' section of the page doesn't quite line up (horizontally) with the background image at certain magnifications (100%, 150%) but seems ok at others (125%, 200%)?? Would be really grateful for any help. Best Wishes, Tom I was wonder what browser or editing program that I can use to see my webpage that would show the map coords as I move my mouse around the webpage please? Thank You in Advance. Guys, hopefully someone can give me a hand here. bear with me, Im a newbie to html yet Im an intermediate/advanced flash programmer. I learned flash but never learned html the right way and am struggling to make html entrance pages for my flash sites.. I know its usually the other way around. i learned flash first. ok, I have a website I made which is opened in a fixed window. the html index page says "enter here" and that button opens the fixed size window. that works fine. The problem is Im trying to learn the html and whenever i have an image on this index page, ( some graphics and the "enter here" button) it may look centered @ 1024 x768 but at a higher resolution ( 1280 x 1024) it will appear on the top left of the screen. I have been tinkering with dreamweaver but im really confused. I keep seeing all of these sites where everything looks aligned regarless of the screen setting. Im not sure if I should use tables , divs or whatever. i have my website logo as a jpg and some other graphics, and im not sure how to put it into the page so it always looks appropriate no matter what screen setting you are on. There is a company that makes nice websites and their entrance pages are always good. I am gonna attach the url of one of these. I notice that they always use divs, a LOT. Is thsi the right approach? and can someone look at the example and tell me how they are doing it? i dont put the url in the post becuase I do want google or other engines indexing the url to this post (for privacy) Thanks a lot url.zip |
|||||||