|
HTML - Image Map Problem-- Please Help Me Out!
Hello, I literally only have the rest of today to figure this out; it is a quick fix I'm trying to do for a company. I'm sure this has been asked many times, but if someone would be so kind as to re-explain I would be SO grateful.
I have made a website with an image map and tables that works well in Safari and Firefox, but gets pretty messed up in IE. The website is www.goldleafworld.com You can view the code there. I'm pretty sure this is something minor..if anybody has any suggestions I would be forever in your debt! Thanks in advance. Megan Similar TutorialsGo to http://chicagotrainingschool.com So the header shows fine in IE 8 and FF. IE 7 is the culprit here. In the middle of the header you see a languages menu, and below that is a world map picture. Looks perfect in FF. For some reason, that world map picture is pushing the nav bar down in IE 7. If I take the picture out or shorten the vertical height that solves the problem, but there are spare pixels there and I don't want to do that. Anyone have an idea of why this is happening and how to fix it? Ok, this probably sounds kinda noobie... or whatever but I put to image codes next to each other like so... HTML Code: <img align="left" src="ball1.png" alt="ball"> <br> <img align="left" src="ball2r.png" alt="ball2"> ok they both show but instead of it looking like this BALL1 IMAGE BALL 2 IMAGE There next to each other like this BALL 1 IMAGE BALL 2 IMAGE How do I solve this also...... how can I move text along without using this HTML Code: <p align="center" say if I only wanted a few spaces forward how would I do that? sorry for my lack of knowledge! Hi. At the moment I'm developing my new site but I have a strange problem. I want to insert an image and make it wider. The original resolution is 1 * 350px and I want to make it 200px wide. But when I insert the code below The image's heigth becomes huge. Code: <img src="images/t3.jpg" width="200px" /> Can you tell me what's the problem. This slows down the entire process. fixed problem never mind sorry! Hi all, I have a problem with one image on a website. Unfortunately it seems to be a problem only for my client. She's using a pc, latest Exploror and has Norton running (which may be the problem). Here's the page with the problem: http://www.sheilachandra.com/information/biog.html The problem image is the linked image on the right hand side, 'Get to know Sheila's career in three minute or less'. It just will not load in to the browser on my clients computer!! It's as if the link never existed. Here's the code that should be the Code: <a href="biog3.html"><img src="../images/general/3minsb.gif" width="120" height="60" border="0"></a> Here's the code that my client sees: Code: <a href="biog3.html"></a> Something has stripped the tag out of the link! Also, here's the bit of javascript that Norton places in the page. Not sure if that's got anything to do with it, but I thought I'd plonk it here anyway: Code: <script language="JavaScript">
<!--
function SymError()
{
return true;
}
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}
window.open = SymWinOpen;
//-->
</script>
Any idea appreciated?? The image map on my site works fine in Safari and Flock on my computer... but works in neither on my actual website? I don't know where the coding could have messed up? i used java for the image map... if anybody knows a more foolproof coding method for it, let me know... www.illustrationbeast.com if anybody needs any of the code not on view source let me know Because I'm still in the process of learning HTML, I am currently creating a webpage in GIMP and using the image map tool to build my website. I have a page at this URL: www.wildthangracing.zzl.org/index2.html The page is loading just fine, but there is white space at the top, left, and bottom of the page and I can't figure out how to get rid of it. Here's the code: <html> <head> <title>Wild Thang Racing</title> <img src="home.gif" width="1349" height="768" border="0" usemap="#map" /> <map name="map"> <area shape="rect" coords="255,133,651,187" href="index.html" /> <area shape="rect" coords="375,214,471,239" href="index.html" /> <area shape="rect" coords="485,216,612,239" href="about.html" /> <area shape="rect" coords="625,214,728,242" href="gallery.html" /> <area shape="rect" coords="738,209,904,240" href="contact.html" /> <area shape="rect" coords="918,209,996,240" href="links.html" /> <area shape="rect" coords="745,119,1079,202" href="http://www.facebook.com/wildthangracing" /> </map> </head> <body> </body> </html> Does anyone know what could be the cause of this? Hi everyone. I don't often use image maps, but for a project I'm doing at work at the moment, I felt it is appropriate, especially as I don't have (or know how to do) Flash. Here's the code I have for a an image map, which when you hover over each outside section, the image changes to another and back again when you hover out. Code: <h2>Overture</h2>
<p>Click on the sections for further information.</p>
<script type="text/javascript">
Image1 = new Image(523,541)
Image1.src = "overturemap.gif"
Image1.border="0"
Image2 = new Image(523,541)
Image2.src = "overturemap_over_appform.gif"
Image2.border="0"
Image3 = new Image(523,541)
Image3.src = "overturemap_over_prospecting.gif"
Image4 = new Image(523,541)
Image4.src = "overturemap_over_script.gif"
Image5 = new Image(523,541)
Image5.src = "overturemap_over_calc.gif"
</script>
<img src ="overturemap.gif" width="523" height="541" border="0" name="overture" id="overture" alt="overture image" usemap ="#overturemap" />
<script type="text/javascript">
function appform() {
document.overture.src = Image2.src; return true;
document.overture.src = Image2.border; return true;
}
function prospecting() {
document.overture.src = Image3.src; return true;
}
function script() {
document.overture.src = Image4.src; return true;
}
function calc() {
document.overture.src = Image5.src; return true;
}
function original() {
document.overture.src = Image1.src; return true;
}
</script>
<map id ="overturemap" name="overturemap">
<area shape="circle" coords="260,79,62" href="PrivateSIPPTrust_Application_Form.doc" target="_blank" alt="Application Form Image" onMouseOver="appform()" onMouseOut="original()" />
<area shape="circle" coords="78,267,62" href="/site/492/overture_prospecting.aspx" target="_blank" alt="Prospecting Image" onMouseOver="prospecting()" onMouseOut="original()" />
<area shape="circle" coords="445,267,62" href="/site/493/overture_telephone_script.aspx" target="_blank" alt="Script image" onMouseOver="script()" onMouseOut="original()" />
<area shape="circle" coords="260,456,62" href="CALC_Overture_1.11.xls" target="_blank" alt="Calculator Image" onMouseOver="calc()" onMouseOut="original()" />
</map>
What I want to know is, what's that top and left border doing on the image? I can't get rid of it and don't want it there. The working map can be viewed at http://swweb.frih.net/map/imagemap.html Many Thanks I 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> Hey all. I am having some trouble positioning some images to the right of a paragraph using css. Can anyone help? HTML: Quote: <!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" /> <link rel="stylesheet" type="text/css" href="../public_html/pages/nature.css"> <!-- TemplateBeginEditable name="doctitle" --> <title>Nature</title> <!-- TemplateEndEditable --> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <script type="text/javascript" src="../public_html/pages/nature.js"></script> </head> <body onload="MM_preloadImages('../public_html/content/homerollover.jpg','../public_html/content/aboutrollover.jpg','../public_html/content/clientsrollover.jpg','../public_html/content/contactrollover.jpg')"> <div class="pagecontainer"> <div class="header"><img src="../public_html/content/header.jpg" alt="Header" /></div> <div class="menunav"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../public_html/content/homerollover.jpg',1)"><img src="../public_html/content/homebutton.jpg" alt="Home" name="Home" width="151" height="40" border="0" id="Home" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About','','../public_html/content/aboutrollover.jpg',1)"><img src="../public_html/content/aboutbutton.jpg" alt="About" name="About" width="150" height="40" border="0" id="About"/></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Clients','','../public_html/content/clientsrollover.jpg',1)"><img src="../public_html/content/clientsbutton.jpg" alt="Clients" name="Clients" width="150" height="40" border="0" id="Clients" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../public_html/content/contactrollover.jpg',1)"><img src="../public_html/content/contactbutton.jpg" alt="Contact" name="Contact" width="149" height="40" border="0" id="Contact" /></a> </div> <div class="content"><div class="contentheader">Lorem ipsum</div><div class="contentcontainer"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lectus. Donec eget tortor id pede vehicula lacinia. Nam vitae risus non neque facilisis consectetuer. Suspendisse bibendum, sem nec rhoncus laoreet, diam tortor malesuada enim, volutpat volutpat sem nisi eget nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris scelerisque. Sed ligula. Mauris neque mi, rutrum nec, luctus a, dictum nec, libero. Duis feugiat erat eget metus. Fusce non orci. Vivamus vestibulum dapibus ipsum. Nunc dictum bibendum nunc. Nam odio augue, tincidunt eget, tristique quis, varius sit amet, justo. Suspendisse sed eros.</p></div></div> <div class="footer">Footer</div> </div> </body> </html> CSS: Quote: @charset "utf-8"; /* CSS Document */ * { margin: 0px; padding: 0px; } body { padding-top: 3%; padding-bottom: 3%; background-color:#bfa494; } .pagecontainer { width: 600px; margin: auto; background:#FF0000; } .menunav { background:#8c8e73; height: 40px; } .header { background:#0000FF; height: 279px; } .content { border-left:#000000 1px solid; border-right:#000000 1px solid; border-bottom:#000000 1px solid; background:#ffffff; height: 300px; z-index:1; } .contentheader { padding:20px; color:#6c482d; font-size:20px; font-weight: bold; font-family:Arial, Helvetica, sans-serif; z-index:2; } .contentcontainer { margin-left:20px; margin-right:300px; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333333; text-align:justify; z-index:3; } .images { padding-bottom:200px; padding-left:400px; z-index:4;} .footer { background-color:#0066CC; height:40px; } Image: http://pseudo.samcamfilms.com/temp.JPG Any help would be appreciated. Ok, what is the code to put in to get this done? I have image at: images/tables/image.jpg and i need to show it at work/portfolio/index.html The problem is if i link to images/tables/image.jpg it will now show it cause the path is wrong at work/portfolio/index.html, how do i set path to the image? do i just put ../images/tables/image.jpg or what is the right code? thanks! ok, the website is http://brett.unixpod.com (its my personal website) i want the top banner to contact with the navigation bar. the problem is when i remove the padding the text goes out of line, but then the menu contacts with the picture. The css stylesheet is he brett.unixpod.com/css/home.css if you dont understand what i mean by anything, ill try to explain, for heaven sakes, im only 14 years old, im still afraid of the boogie monster!!! Hi I have just designed my first html eshot and tested it on different email clients using Mailchimps inbox inspector. Its fine across all clients as far as I can see except for Outlook 2007 & 2010. The image on the left moves out of place quite a bit. Outlook 2003 and all others are fine, its just 2007 & 2010 causing the problem. Weblink (how it should look) Outlook 2007 & 2010 (how it shouldn't look) Outlook 2003 (just fine) Does anybody know whats wrong? I'v tried all sort and it nothing is working, its driving me crazy! Dam you outlook! Thanks! Hi there, I've recently been working the following site http://www.midnightguild.info The theme that im using needed to be expanded which all went fine except for a strange problem with the right side bar which is missing but space for it has been made as you can see the black on the slightly coloured background. I've tried resizing this a number of times and also replacing the image and renaming etc but I cant seem to get the right hand panel to appear. The image file being used is http://www.midnightguild.info/styles...ges/boczki.jpg which should display a right and left panel but only the left is being displayed correctly, im a bit clueless as to why this may be happening. My CSS for this image frame is as follows: #wrap { padding: 0 0px; min-width: 650px; width: 1050px; margin: 0 auto; background-image: url({T_THEME_PATH}/images/boczki.jpg); background-color: #000000; } Thanks, Mike Hello! I'm having trouble with a mouseover image I'm using. I've done mouseover before, but for some reason, it isn't working for me! It is a download button, and if you move your mouse over it, it is supposed to be highlighted. I have it on the page 11 times. If I use it just once, it works. If I use it more than once, it doesn't work. Can anyone tell me why? Much thanks!! http://slw.110mb.com/templates/tindex.html - the page http://slw.110mb.com/mainstyle.css - css page if you need it Hey, im making a portfolio site and i am linking my images except when i link them i get a small blue border around it whihc moves it down a bit and it looks outta place i was wondeirng is there anyway to take this border out or not plz help. heres what it looks like be4 and after. Eyup people I was just wondering how I would go about centering or stretching a background image on a webpage without it doubleing itself. i hope that makes sense lol... sorta like when you set a wallpaper on your computer screen and set it to "tiled", there maybe more than 1 image showing. Id just like it to be stretched. any help would be appreciated thanks I seem to be having a problem with my image rollover effect in the header of my website. I am using CSS to call in the image. When using IE, the rollover happens much too slow. This doesn't seem to be a problem in firefox or safari. Any suggestions? Site: www.gallantgifts.com CSS: www.gallantgifts.com/css/master.css Thanks!! It's been a very long time since I've had to play around with HTML, and apparently it's true what they say, if you don't use it, you lose it... Anyway, I'm here with what will undoubtedly seem like a foolish question to the more experienced coders: I designed and sliced a simple little template in photoshop and was attempting to get all the sliced images formed together in a nice little table so I could put together a page... Only problem is: After I switch from a 7x2 table to a 3x2 table, I get this odd repeating line to the right... The code I'm using for this is as follows: HTML Code: <html> <title>SkateLand of Milton - Home Page</title> <body ALIGN="MIDDLE" bgcolor="#3e7600"> <table cellpadding="0" cellspacing="0"> <TR VALIGN="MIDDLE"> <TD WIDTH="47" HEIGHT="339" style="width: 47px;background-image:url(images/slice_01.png);"/></TD> <TD WIDTH="63" HEIGHT="339" style="width: 63px;background-image:url(images/slice_02.png);"/></TD> <TD WIDTH="81" HEIGHT="339" style="width: 81px;background-image:url(images/slice_03.png);"/></TD> <TD WIDTH="255" HEIGHT="339" style="width: 255px;background-image:url(images/slice_04.png);"/></TD> <TD WIDTH="72" HEIGHT="339" style="width: 72px;background-image:url(images/slice_05.png);"/></TD> <TD WIDTH="69" HEIGHT="339" style="width: 69px;background-image:url(images/slice_06.png);"/></TD> <TD WIDTH="63" HEIGHT="339" style="width: 63px;background-image:url(images/slice_07.png);"/></TD> </TR> <TR VALIGN="MIDDLE"> <TD WIDTH="47" HEIGHT="63" style="width: 47px;background-image:url(images/slice_08.png);"/></TD> <TD WIDTH="63" HEIGHT="63" style="width: 63px;background-image:url(images/slice_09.png);"/></TD> <TD WIDTH="81" HEIGHT="63" style="width: 81px;background-image:url(images/slice_10.png);"/></TD> <TD WIDTH="255" HEIGHT="63" style="width: 255px;background-image:url(images/slice_11.png);"/></TD> <TD WIDTH="72" HEIGHT="63" style="width: 72px;background-image:url(images/slice_12.png);"/></TD> <TD WIDTH="69" HEIGHT="63" style="width: 69px;background-image:url(images/slice_13.png);"/></TD> <TD WIDTH="63" HEIGHT="63" style="width: 63px;background-image:url(images/slice_14.png);"/></TD> </TR> </table> <table cellpadding="0" cellspacing="0"> <TR VALIGN="MIDDLE"> <TD WIDTH="47" HEIGHT="542" style="width: 47px;background-image:url(images/slice_15.png);"/></TD> <TD WIDTH="540" HEIGHT="542" style="width: 540px;background-image:url(images/slice_16.png);"/></TD> <TD WIDTH="81" HEIGHT="542" style="width: 81px;background-image:url(images/slice_17.png);"/></TD> </TR> <TR VALIGN="MIDDLE"> <TD WIDTH="47" HEIGHT="56" style="width: 47px;background-image:url(images/slice_18.png);"/></TD> <TD WIDTH="540" HEIGHT="56" style="width: 540px;background-image:url(images/slice_19.png);"/></TD> <TD WIDTH="81" HEIGHT="56" style="width: 81px;background-image:url(images/slice_20.png);"/></TD> </TR> </table> </body> </html> I'm kind of left scratching my head on this one... I don't really know how to solve this. After fixing the code for my image maps after my question yesterday, I got an email from a user saying this: "I just noticed one thing when viewing the site using IE. on the pages, IE is shrinking the image and rather than giving me the option to click on a link, it gives me a magnifying glass to enlarge the image. When i enlarge the image, I still can't click on the links. Instead I get the magnifying glass to shrink the image back down." Here is an example of the code: <img src="About.jpg" width="1100" height="825" border="0" usemap="#about" /> <map name="about" /> <area shape="rect" coords="285,29,316,50" href="http://www.com" title="HOME" alt="Home" /> <area shape="rect" coords="383,29,460,50" href="http://www.com/teachers" title="FOR TEACHERS" alt="For Teachers" /> <area shape="rect" coords="469,29,516,50" href="http://www.com/support" title="SUPPORT" alt="Support" /> </map> It works fine with Safari and Firefox. What could be causing that problem with IE? |
|||||||