|
HTML - Image Maps Not Where They Are Meant To Be
Hi all,
I'm working on a schedule system that reads its data fro a mysql db via php and dynamically creates an image of the schedule. it then creates an image map of each object in the schedule, puts it all together and displays it. the problem I have been having for the last few days is that only the first hot spot is where is is meant to be, the rest are all off set by seemingly random amounts. Does anyone know what would be causing this? Similar TutorialsI am trying to work out how to create a rollover within a image map that creates the onmouseover effect in a seperate div - next the map on the page...Can anyone help me with this??? Here's what I have so far... <for the html> <div id="name"></div> <div id="box_l"> <img src="images/ludlow-main-map.gif" width="304" height="407" alt="" usemap="#map" style="border:none;" /> <map name="map" id="map"> <area shape="circle" coords="143,259,5" href="#" onmouseover="showme('MATERIAL');" onmouseout="out()" /> </map> </div> <and for the CSS> #box_l { width:310px; height:407; border:none; float:left; display:inline; margin-bottom:10px; } #name { width:600px; height:407; font-size:3.5em; font-weight:bold; font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif; letter-spacing:-2px; color:red; display:inline; text-align:justify; float:right; } <also, here's the javascript> <script type="text/javascript"> function showme(what) { $("#name").html(what+'<span style="color:black">.</span>'); $("#name").fadeIn('fast'); } function out() { //setTimeout("$(\"#name\").fadeOut('fast');",1000); $("#name").fadeOut('fast'); } </script> Any help is hugely appreciated. thx Hello, l saw this today about making an image map. http://www.javascriptkit.com/howto/imagemap.shtml after looking at it for a while and reading it l tried it at the end, l got my image to show up and the buttons are on the image but l can't see them, l know they are there because when l hover my mouse over parts of the image it changes. Anyone got any ideas why??? Hi Folks, I wondering if anyone else is experiencing issues with simple HTML image maps displaying hot area outlines in IE8. Please note the image map does work it's just that a black outline of the hot area is displayed when the hot area is clicked. IE6 (except for png issue), Firefox, and Chrome are fine. I haven't tried IE7 yet (maybe one of you is still using it and can confirm) but try IE8 and you'll see the problem I'm talking about. Is there a simple HTML work around here that I'm missing. You can see the problem I'm experiencing here. Or have future versons of IE just decided to stop supporting image maps. With many thanks, John I am experimenting using image maps for links. In DW it is displaying as a map is there, but when I check my work in the browser there is no link when I hover my mouse Any suggestions on what I have done wrong below? HTML Code: <div id="header"><img src="images/header_image.jpg" usemap="map1" border="0" /></div> HTML Code: <map id="map1"> <area shape="rect" coords="10,10,280,180" href="#" alt=""> </map> I'm trying to create a image map for an assignment. They provide the coordinates and the image (I've attached the image). I'm suppose to make it link to the pages I've created called tempest.htm, commentary.htm, cast.htm. (They are all in the same folder with the html page with the image maps) This is what I have but its not working ....... <html> <head> <title>The Mian Page</title> <!-- The Main Page Author: John Smith Date: Oct. 04, 2011 --> </head> <body> <img src="tempest.jpg" alt="The Tempest By William Shakespeare"> <map id="map1" name="map1"> <area shape="rect" alt="link" coords="228,139,345,173" href="tempest.htm" /> <area shape="rect" alt="link" coords="359,139,508,173" href="commentary.htm" /> <area shape="rect" alt="link" coords="520,139,638,173)" href="cast.htm" </map> </body> </html> Alright, well I have a banner centered at the top of my page, http://www.hyphygraphix.com. I want to create an image map with 2 links where is says "Add Ash" and "Add HG" to my myspace pages. I want it to relevantly move with the image if a user where to use a larger/smaller resolution or if they choose to resize the browser. (I have this problem with the iframes too but I'll ask about that in a later thread) Can someone help me out? Hi guys My skill level is very low (beginner). This is my first webpage. I've created an image map. I would like to have the areas of the image map have tooltips - so when someone's mouse goes over each particular area, a tooltip with text comes up. I'd like the tooltip to look something like these tooltips: http://sandbox.leigeber.com/tooltip/ except I'd like these to be for my image map, and not for text as they are in the example given. Could you guys point me in the right direction/offer advice as to how I could achieve this affect? I have a question concerning a image map. I am creating a best buy/circuit city like email advertisement that will be sent out to users/members of a website. The email contains images (products) that the user will click on and will be directed to that product on the website to purchase. My question is, how do you email an image map? Is it possible? Or is there another way I should go about this all together? My image map worked fine until today. I just upgraded to firefox 3, but it's borken in IE also. Are image maps history? This exact code does not work for me now.. Code: <!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=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <map id="jugmap" name="jugmap" > <area shape="rect" coords="9,21,55,42" alt="home" title="home" href="?display="> <area shape="rect" coords="10,43,110,63" alt="instruments" title="instruments" href="?display=instruments&slideshow=instruments"> <area shape="rect" coords="12,66,127,86" alt="items for sale" title="items for sale" href="?display=forsale"> <area shape="rect" coords="11,89,143,113" alt="upcoming events" title="upcoming events" href="?display=events"> <area shape="rect" coords="11,113,128,131" alt="custom builds" title="custom builds" href="?display=custom_builds"> <area shape="rect" coords="10,135,110,157" alt="mailing list" title="mailing list" href="?display=mailing_list"> <area shape="rect" coords="10,159,71,178" alt="contact" title="contact" href="?display=contact"> <area shape="rect" coords="11,180,54,201" alt="links" title="links" href="?display=links"> </map> <img src="images/menu.jpg" width="170" border="0" usemap="jugmap" > </body> </html> im making a navigation image for my forum as an image map, but how do i find out what the co-ordinates are for the links i need? sorry if this doesnt make sence,anything else you need to know please ask Jake I can't seem to get my image map to work in FF, it works fine in IE. Also, can I do things with the CSS hover attribute with image maps? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Pl3x.net Introduction </title>
<!-- Link to external stylesheet -->
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="intro">
<img src="images/IntroAni.gif" class="intro" usemap="#navmap" />
<map id="navmap" name="planetmap" class="navmap">
<area shape="rect" href="#" class="n1" coords ="0,0,100,100" />
<area shape="rect" href="#" class="n2" />
<area shape="rect" href="#" class="n3" />
<area shape="rect" href="#" class="n4" />
</map>
</div>
</body>
</html>
Code:
div.intro { margin: auto; height: 500px; width: 500px; }
map.navmap { border: 0px; }
img.intro { border: 0px; }
I have a jpeg (1600 x 1600) and a "view port" on my html page that measures 400x400. Can I put the entire jpeg "behind: the viewport somehow and enable the user to drag it around so as to be able to see the whole thing (like on Google Maps)? If there is an example somewhere of how to do this, could you point me to it? Thanks, JAS Can an image map be stored externally, and read in, when an image is read in? For my current project, I will have 67 different image maps, but for my next project, that will increase to 125 different image maps. George I just found out that a site I built for a nonprofit isn't working properly on Internet Explorer or Firefox. It does work on Safari. It appears the client-side image maps are the problem. I used <map> and <area> inside <img>. Here is some of my code: <img src="About.jpg" width="1100" height="825" usemap="about" /> <map name="about" /> <area shape="rect" coords="285,29,316,50" href="" title="HOME" alt="Home" /> <area shape="rect" coords="383,29,460,50" href="" title="FOR TEACHERS" alt="For Teachers" /> </map> (URLs removed intentionally to protect client's privacy.) I was going by the book, Beginning HTML, XHTML, CSS, and JavaScript, by John Duckett, published in 2010. According to this book, this is the recommended type of image map. It says this code should be compatible with today's most popular browsers. So does this type of image map simply not work on Internet Explorer and Firefox? Or is there something wrong with my code? What type of image map does work with all the major browsers? Hi All! Im having a real problem removing image and image map outlines from my site at www.quickmarchminiatures.com In internet explorer all images have a border on click... please help.....Ive tried editing css Cheers Dan Hi all, Sorry for such an elementary question but up until now I have always used ../ for my references. So I don't have to duplicate code I decided to use ~/ for some referenced links and it doesn't seem to work. Get 404 on the requests. Ok.. what am I missing? Much thanks! s-one "This will help immensely when you 1) rewrite all your pages and can use a script to replace one set of standard text with another set of standard text instead of doing all the changes by hand and 2) when someone else tries to modify or add to your collection of web pages. " I am basically teaching myself html web-design and am trying to understand what is meant by the first piece of advice... can someone explain what is meant by this in a languge that someone who is still trying to understand the basics of html would understand? Any clarification will be greatly appreciated. Thank you. I have a website, which I plan to make a random image load each time the page is refreshed. I would like to use an image map within this image to make certain parts hyperlinks to different areas. Unless I make it so that the image's link (using the image map) are in the same place within each picture, can I do it? ie (excuse the crap image drawing) Load one: ======== =Link1-----= =-----Link2= =Link3-----= ======== Load Two: ======== =-----Link1= =Link2-----= =-----Link3= ======== Both the image and the image map need to be updated. Can I do this? I have access to PHP, MYSQL and the normal extras. Thank you for your help in advance Dan Walters Hi Forum!! Okay I'm using an image map (well sliced image...I dont know if theres a difference) and I'm trying to get the imape map links to open up in either a table or a frame below. I didnt know if you can target images into a table...thats why I said or. Right now I have a table with a frame inside of it although I don't tihnk my frame code is right and the frame isnt really there. Here is a link to the outline of fanlisting ---I have ALOT of bugs to work out as you will see. www.geocities.com/diesel_girl35/index.html The actual links in my image map is working but Im not sure how to direct them to where I want them to go. And my table is too small... I wanted it to be the width of the image..which I think I can figure out. BTW if anyone has any suggestions on a better way to accomplish what I'm trying to accomplish please advise me =} And here is what my image map code looks like..if it will help. So should I target into a table or frame and how would I go about getting everything to work right? PLEASE AND THANK U <!-- Begin Table --> <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="856" HEIGHT="447"> <TR> <TD ROWSPAN="1" COLSPAN="6" WIDTH="856" HEIGHT="407"> <IMG NAME="ino_menu30" SRC="ino_menu3_1x1.png" WIDTH="856" HEIGHT="407" BORDER="0"></TD> </TR> <TR> <TD ROWSPAN="1" COLSPAN="1" WIDTH="75" HEIGHT="40"> <A HREF="http://www.geocities.com/diesel_girl35/ino_about.html" target="about"><IMG NAME="ino_menu31" SRC="ino_menu3_2x1.png" WIDTH="75" HEIGHT="40" BORDER="0" ALT="About Its Not Over"></A></TD> <TD ROWSPAN="1" COLSPAN="1" WIDTH="74" HEIGHT="40"> <A HREF="http://www.geocities.com/diesel_girl35/ino_rules.html"><IMG NAME="ino_menu32" SRC="ino_menu3_2x2.gif" WIDTH="74" HEIGHT="40" BORDER="0" ALT="Know The Rules"></A></TD> <TD ROWSPAN="1" COLSPAN="1" WIDTH="86" HEIGHT="40"> <A HREF="http://www.geocities.com/diesel_girl35/ino_codes.html"><IMG NAME="ino_menu33" SRC="ino_menu3_2x3.gif" WIDTH="86" HEIGHT="40" BORDER="0" ALT="Get Sum Codes"></A></TD> <TD ROWSPAN="1" COLSPAN="1" WIDTH="71" HEIGHT="40"> <A HREF="http://www.geocities.com/diesel_girl35/ino_join.html"><IMG NAME="ino_menu34" SRC="ino_menu3_2x4.gif" WIDTH="71" HEIGHT="40" BORDER="0" ALT="Become A Fan"></A></TD> <TD ROWSPAN="1" COLSPAN="1" WIDTH="79" HEIGHT="40"> <A HREF="http://www.geocities.com/diesel_girl35/ino_xtra.html"><IMG NAME="ino_menu35" SRC="ino_menu3_2x5.jpg" WIDTH="79" HEIGHT="40" BORDER="0" ALT="More Stuff"></A></TD> <TD ROWSPAN="1" COLSPAN="1" WIDTH="471" HEIGHT="40"> <IMG NAME="ino_menu36" SRC="ino_menu3_2x6.gif" WIDTH="471" HEIGHT="40" BORDER="0"></TD> </TR> </TABLE> <!-- End Table --> to get the google maps api key normally one has to login to their gmail account and enter a website address and the generated key is used in a website my question is if i have to work with many clients can i still use my own gmail login and create an api key for different clients and use the generated api key for indivdual clients websites or do the clients need to have their own gmail account can i use my 1 personal gmail account and keep creating separate api keys for different websites by specifying the individual client website address while in the google maps api page please advice. |
|||||||