|
HTML - Can Image Maps Be In An External File?
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 Similar TutorialsHello, 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??? 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> I 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 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 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 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? 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? 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? 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; }
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> 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 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 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 there, I've got an example xml page that I'm trying to separate into tidier pices (eg separate files for stylesheets, xsl, xml etc). However I don't know how to separate the xml file? Normally in html it's just something like with stylesheets/javascript etc: <script>script here</script> turns into <script src="external.js"></script> But that doesn't work with xml it appears, so can anyone tell me how I can remove the bit in <xml> ... </xml> to an external file and get it loading from that external file...? I have an html application consisted of a number of html files, js files and css files. Is it possible to have an external property file where I can keep the name of the server so as to use a variable for the urls? For example to have something there like nameOfTheUrl=andreana and in the html file to have something like http://nameOfTheUrl/content/index.html My server has java but it is not a servlet container so I can not use jsp. 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 --> Hi guys, I have a div on my page, which essentially just places a layer/table over the entire page and displays a "LOADING..." message, then promptly disappears when everything hidden beneath it has finished loading. I want to use this same div in several other pages, so I thought the best way would be to place it in an external file, then simply call it when required. Can someone please tell me how I can do this, i.e. what code I need to place in my HTML script to call an external div? I apologise if this is an obvious newbie-style question! But I appreciate any help that anyone out there can give me. Thanks in advance, Kate. |
|||||||