|
HTML - Image Maps And Targeting In Frame Vs. Table?
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 --> Similar TutorialsHello, I am having a problem with frame targeting in safari. The problem page: http://www.danshamptons.com/insider_guide/summer10/ Click "arts & attractions" on left Click "amagansett" Click "the art barge" (pulls up a dummy listing) Now click "amagansett" again. The page opens in a new browser window, instead of the frame "listingcontent" as it did when it was first clicked. This only is happening with Safari. Can anyone tell me what is happening here, and what a solution might be ? Thanks, Colin Hi Folks, Is there a way to target the results of a form on one of my pages to a frame in a frameset. I have a form which produces a search on a site I pay to use. I want the results of this search to be in the bottom of a two row frameset. The top row of the framset will have links back to. The form itself is on my main page and is NOT a part of a frameset. Hope i have been clear. I'm assuming I may have to use javascript or php but not sure. All the best, Libman I have a table with multiple cells. One cells has a PHP generated list in an iframe. This list is a collection of links from a MySQL database. When I click on any of the links, I'd like to call the results into another cell. For example: In cell A I have my list. When one of the links is clicked, I would like the results to display in cell B. If another link is clicked in cell A, I would like cell B's contents to update. I know this is possible, but I have yet to figure out how. Anyone?? Thanks in advance - sleepydad Hi there, I was wondering if anyone knows how to centre an image link in another frame (yes I know frames are bad but its an old website I am updating) i have <a href="picturelink" target="mainframe"> <img src="thumbnail" border="0"></a> I have tried everything from class="center" to editing the original frameset and the original page loaded into the window but I can't get the jpeg file to load up centred and so I was hoping someone might be able to help as I don't want to link all the pictures to seperate html documents with only a centred image in... Thanks for any help. 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 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??? 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> 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'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> 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 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? 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 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? 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 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; }
Hello, could someone point me to where I can read about making a table work as a frame? I have 4 images, which are pages, I would like to have them displayed in a table below without refreshing the page when I click on them. Please see the attachment! The buttons are in flash, if that is helpful. Thanks! 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? 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 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 |
|||||||