|
HTML - What's Wrong With My Image Map? :s
Hello I'm new here.I thought maybe you guys can offer me some help by taking a look at my code for my client side html map.I'm a bit of a noob, and self taught as well.i'm pretty sure i grabbed this code from the htmlforums tutorial.
I'm using tripod to make my site. My image map is suppose to take up the whole page. Firstly, the whole picture itself shows up as a linkable image with no separate link areas, secondly, theres a hideous blue border around it.Could anyone of you take a look? It would be much appreciated. This is the html for the whole document located in my file manager. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!-- \/ starthtml --> <html> <head> <!-- The block of META tags is required by Homepage Studio --> <!-- to identify this file as created by Freeform Editor. --> <!-- Please do not remove them, but feel free to append --> <!-- them with your personal data below. Meta tags help --> <!-- search engines identify the content of your page. --> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <META NAME="keywords" CONTENT="enter keywords here"> <META NAME="description" CONTENT="enter a description here"> <META NAME="author" CONTENT="enter your name here"> <META NAME="generator" CONTENT="FreeFormEditor 1.0"> <TITLE></TITLE> </head> <body> <body bgcolor="#FFFFFF" text="#000000" link="#0000EE" vlink="#551A8B"> <MAP> <A HREF="lyndlsimagemap3.jpg"> <IMG SRC="lyndlsimagemap3.jpg" HEIGHT="800" WIDTH="800" ISMAP USEMAP="#lyndlsimagemap3"></A> <map NAME="#Lyndlsimagemap3"> <area SHAPE=RECT COORDS="68,460,164,480" HREF="page1.html" ALT="page1"> <area SHAPE=RECT COORDS="25,72, 28,97" HREF="http://www.google.com" ALT="google"> <area SHAPE=RECT COORDS="107,158, 132,162" HREF="http://google" ALT="google"> <area SHAPE=RECT COORDS="9,115 86,79 98,116 69,131 86,175 48,206" HREF="http://google.com" ALT="google"> </MAP> </body> </html> <!-- /\ end html --> Thank you so much Similar TutorialsHallo i try to create something allone .. i have a problem with one picture i want it at center of page and smaller but saws huge and at the right l2.pron.gr Take a look thanks. Hi all -- I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide. I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line. I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed. Help! How do I get rid of this white space but still keep the link on the image?? [I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having] Thanks in advance! //kl PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner. CSS: Code: <style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
#main_banner2 {
margin: 0px;
padding: 0px;
height: auto;
width: 1000px;
}
-->
</style>
</head>
Nav Banner: NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space... Code: <body class="oneColFixCtr"> <!-- MAIN NAVIGATION BANNER --> <!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br /> O.K, I'm building my new website and using smart FTP client to upload my files. Please take a look at the website I'm building, how come it is like this? www.hautecoutureforkids.com When I click the .html buttons it works, but I don't want it like that. I want when I type in my website's name, the page appears automatically. I hope my explaination is not confusing. Please help Thank you in advance Ning Ok, so I was using dream weaver to make a website for a school assignment. Everything was ok until I previewed the page in my browser and everything thing was way of context the table was stretched a lot more than it should have been, but everything looked perfect in design view in dreamweaver. I understand that the browser is going to be larger and the screen resolution will be away out, but I'm not sure how to fix it, what do I need to change to get a good layout. Thanks. Here is the code. Code: <html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" bgcolor="#FFFFFF">
<table width="72%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td rowspan="2" bgcolor="#666666"> </td>
<td width="50%" height="141" bgcolor="#000099"><div align="center"><img src="mm/stationery/CatalogB/golf ballistics.jpg"
width="700" height="200"></div></td>
</tr>
<tr>
<td height="97" align="center"><table width="72%" height="35" border="0" cellpadding="4" cellspacing="4">
<tr bgcolor="#CCCCCC">
<td bgcolor="CCCCCC"> <div align="left"><strong><font face="Tahoma">
</font></strong>
<div align="center">
<div align="center">
<pre> <strong><font color="#339966" face="Tahoma"> </font></strong></pre>
<pre><strong><font color="#339966" size="3" face="Tahoma"><a href="www.example.com">Home Online shopping
forum Equipment </a> </font></strong></pre>
</div>
</div>
</div></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="399" height="612" border="0" align="center" cellpadding="4" cellspacing="0">
<tr valign="TOP">
<td width="19%" rowspan="2" valign="top" bgcolor="CCCCCC"> <p align="center"><font face="Tahoma">Harrington
Tops Woods</font><br>
<br>
<img src="woodsharrington111906_400.jpg" width="195" height="201"></p>
<p align="center"><nobr><font face="Times New Roman, Times, serif">: <ABBREV>Padraig
Harrington made a dramatic late comeback to catch Tiger Woods,
then beat the world's No. 1 player on the second playoff hole Sunday to win the
Dunlop Phoenix tournament in Japan. Both players birdied the 72nd ho
to shoot 67 and finish at 9-under-par 271: </ABBREV></font></nobr></p></td>
<td width="38%" height="336" bgcolor="#CCCCCC"> <img src="tshirt.jpg" width="133" height="164"><br>
<p><nobr><strike>Was £39.99</strike></nobr></p>
<p>Now £15.99<nobr></nobr></p>
<p><nobr><a href="#">Add to Cart</a></nobr></p></td>
<td width="43%" bgcolor="CCCCCC"> <p><img src="DWTM110L.jpg" width="154" height="152"></p>
<p><strike>Was: £299.99</strike> <br>
</p>
<p>Now: £99.99 <br>
</p>
<nobr><a href="#">Add to Cart</a></nobr></td>
</tr>
<tr valign="TOP">
<td bgcolor="CCCCCC"> <p><img src="nw.jpg" width="135" height="148"></p>
<p><strike>Was: £199.99</strike> <br>
Now: £99.99 </p>
<p><a href="#">Add to Cart</a></p></td>
<td bgcolor="CCCCCC"> <p><img src="cl.jpg" width="151" height="149"></p>
<p><strike>Was: £149.99</strike><br>
Now: £129.99 <br>
</p>
<p> <nobr><a href="#">Add to Cart</a></nobr></p></td>
</tr>
</table>
<table width="92%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td width="0%" align="center" valign="top" bgcolor="#000099"> </td>
<td width="100%" valign="top">
<p> </p>
<table width="90%" border="0" cellspacing="4" cellpadding="4" align="center">
<tr bgcolor="BottomNavigationColor">
<pre><td> <a href="www.example.com"><align="center"> Contact us | Terms
and conditions | Help </a></td></pre>
</tr>
</table></td>
</tr>
</table>
<table width="92%" border="0" cellspacing="0" cellpadding="4" bgcolor="#999999">
<tr align="right">
<td bordercolor="#999999" bgcolor="#CCCCCC"><em><a href="www.example.com"><strong>Back to top</strong></a></em></td>
</tr>
</table>
</body>
</html>
Hello everyone I am very new to this so be kind! Why can I only see code on this page and what do I do to put it right? http://www.test.q-p-e.co.uk/jobby.html Whats wrong with this code its not comming up when i try it HTML Code: <html>
<head>
<title> Buzz OFF!!! </title>
<script language="JavaScript">
<!- Hide from older browsers
alert("Press ok to start reformatting your hard disk");
// end hiding ->
</script>
</head>
</html>
If I type this URL into my browser location bar, it works just fine, and displays the image properly: http://www.zappos.com/n/multi_view.c...223&view=multi If I use the same URL in the following code on an html page and render it in the browser, no image displays: <img src="http://www.zappos.com/n/multi_view.cgi?product_id=7558977&color_id=205223&view=multi"> What am I doing wrong? I've tried encoding it, but that didn't fix the problem. Can someone please help? I'm sure I'm missing something completely obvious. Thanks, Janet Hi guys, new to the forum. Trying to put together a portfolio site: http://www.studioeighty.co.uk/portfolio/ I'm using a program called Coda-Slider which is JavaScript but for some reason only one of the arrows is showing. Any ideas where I've gone wrong? thanks in advance. studioeighty I'm changing from HTML 4.01 to XHTML 1.0 Transitional now, but what are my errors here exactly? http://validator.w3.org/check?uri=ht...andersmj.dk%2F EDIT: Looks like there's only one error now, but please allow me to ask again if solving this one causes new ones. I have this line of PHP that keeps getting an error message about an unexpected "=" sign. if ($prevPage > $chapters[$chapter][0]) $out .= "<a href="/book.php?chapter={$chapter}&page={$prevPage}">Prev</a>"; As best I can figure it out the offending "=" is that one in "....?chapter={$chapter..." Can anyone tell me how to fix this, please? found the problem. Hey Guys I am trying to find the correct spot in the following link to add the no follow tag I tried as it is but my software on my site tells me its still do follow any help appreciated http://www.amazon.com/gp/product/B003VQQVDU/ref=as_li_ss_tl?ie=UTF8&tag=facdirjewclu-20&linkCode=as2&camp=217145&creative=399349&creativeASIN=B003VQQVDU" rel="nofollow">VIZIO M221NV 22-Inch Full HD 1080P LED LCD TV with VIA Internet Application, Black</a><img src="http://www.assoc-amazon.com/e/ir?t=&l=as2&o=1&a=B003VQQVDU&camp=217145&creative=399349" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> Could you highlight where I have to put the no follow tag and if there needs to be a space like there is above thanks Hello. I need to know what i'm doing wrong in this code. Code: <html> <title>CoAlliance</title> <head><img src="banner.jpg"></head> <body> <table border="0" style="float: left;"> <tr><td><img src="button1.jpg"></td></tr> I added a banner, and when I add a picture for a button, I can't see it. Help me please. Hi all, I am quite new to HTML and i'm not too sure what I have done wrong. On one of my website pages I wanted to display 4 pictures in a grid of 2 by 2, this works fine but the text does not sit right. It is going up the middle of the pictures. How do I get it so that the text stays below the pictures and not going in between them? My website is www.flobbadobba.co.uk and the page I am having this issue with is the jigsaw puzzle page (www.flobbadobba.co.uk/puzzles.html) at the moment it is just this page that I am having the issue with but I'm sure I will get the issue on other pages later as I plan to do some similar layouts. Any help will be great. Simon Hi All, I was hoping to start a site from scratch and muddle my through any issues that came up. I came across this article about how to auto size the background image and thought that it would give me a perfect start as I could get a nice background that would auto resize. http://css-tricks.com/perfect-full-p...kground-image/ I dunno what I am doing wrong but the background image never displays. Is anyone able to create me some test files that I can simply dump on my server and see if it works. Sounds silly i know but I cannot get the image to display and I am not sure why! Thanks I might be a noob but this should work I have a button on my left frame and when i click it i want index.php to pop up in the mainFraim but it does not On my button i have the link pointing to index.php and the target as mainFrame. this should work but i'm not doing something correct. help I might be a noob but this should work I have a button on my left frame and when i click it i want index.php to pop up in the mainFraim but it does not On my button i have the link pointing to index.php and the target as mainFrame. this should work but i'm not doing something correct. help fishing.crescentlakeor.com/default.htm There is something wrong with my video object, and I can't figure out what I'm doing wrong. I've been at this for four days now and it's driving me nuts. Here's the markup I'm using for this object. I'm trying to get my video to start playing automatically, with no controls showing, and make it loop. What it's actually doing is the exact opposite of what I'm telling it to do - I'm getting the controls right before the video starts, it won't start until the whole video's downloaded, and it's not looping. Grrrrr! I'm seriously ready to throw my laptop out the window. <object id='mediaPlayer' width="848" height="416" classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95' codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701' type='application/x-oleobject'> <param name='fileName' value="transitions/home.avi"> <param name='animationatStart' value='true'> <param name='transparentatStart' value='true'> <param name='autoStart' value="true"> <param name='showControls' value="false"> <param name='loop' value="true"> <embed type='application/x-mplayer2' pluginspage='http://microsoft.com/windows/mediaplayer/en/download/' id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='-1' bgcolor='black' showcontrols="false" showtracker='-1' showdisplay='0' showstatusbar='-1' width="848" height="416" src="transitions/home.avi" autostart="true" loop="true"> </embed> </object> Here's the link to my site. http://prestigekitchensandbaths.com/test/ Hello! I'm completely self taught and sometimes I get things wrong. I'm having problems with the html. The site looks bigger and some of the sizes (scroll bar) aren't right in Internet Explorer - I was wondering if anyone could tell me what the problem is or even suggest another way to work it out.. Here's the link: http://www.shortdoggkennels.com/brooklynsedge/home.html And here's a direct link to the CSS: http://www.shortdoggkennels.com/brooklynsedge/style.css Thanks in advance! |
|||||||