|
HTML - Imagemap Not Working
Hello,
I have created a large image with an image map (see http://www.brammaas.nl/australia/). However, the image map is not working correctly (just hover the image and you will notice that not every dot or image in the map corresponds with the link it should correspond with). Do you have any idea why this code is not working? Best regards, Similar Tutorialshttp://www.wishwishwish.net Okay, so i created this website by modifying the default wordpress theme, and using my own image as a background, which is defined in the css. I originally wanted to use an imagemap, so I used this tutorial to help me create one, with the css in the style.css, and html in header.php this works perfectly in firefox, but not at all in IE, the links do not appear. this might be happening in other browswers as well, what's wrong? is it the method i've used for creating the floating image map? So frankly, I'm confused. I have an image map set up for an image on a webpage I was asked to design, and the map links WORK in google chrome, and in Safari. However, they do NOT work in Firefox nor in IE 8. I have verified the html code, so I don't know what it would be. Any ideas? I can show the html if you'd like. I didn't know where to post this one so I am posting this in both CSS and HTML. I have one last problem to tackel (I hope) I want my footer to be my Navbar. Here is my current code (attached is a GFX of what it looks like): <!doctype html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"> <title>The works of D.M. Rosemark</title> <style type="text/css" media="screen"> <!-- body { background: url("bkg.gif"); background-repeat:no-repeat; background-attachment:fixed; margin: 0px } div#wrap { margin: 0 auto; width: 800px; } div#header { height: 100px; background: url("bkga.gif"); background-repeat:no-repeat; background-attachment:fixed; margin: 0px } div#footer { height: 100px; background: url("bkgb.jpg"); background-repeat:no-repeat; background-attachment:fixed; margin: 0px } div#frame { margin: 0 auto; width: 600px; } iframe#one { border-style:ridge; border-width:10px; border-color:#999999; width: 600px; height: 375px; padding:1px; } //--> </style> </head> <body> <div id="header"></div> <div id="frame"><iframe id="one" frameborder="0" src="01.html" scrolling="yes"> </iframe></div> <div id="footer"></div> </body> </html> So since I cannot use HTML in my CSS, which is where my 'footer' (bkgb.jpg) resides how preytel do I make an image map in CSS? or is it possible to create the image map in the HTML portion relating to the CSS <DIV>? Hi, quick question about imagemaps I have a map of the UK that I'm using with an imagemap, different clickable regions. I've got the areas defined properly. Is it possible to have some kind of a:hover css rule on the different areas, so for example the region will change colour but leave the rest of the picture the original colour; maybe using background images?? I was thinking of putting the map picture in the background of a div, then using a transparent gif over the top and applying the imagemap to that so i could still change the background-position, but then i got confused. Thanks for any advice I know it sounds silly to even be asking questions about imagemaps, but i can't figure out any other way of getting what I want. Here's my issue: At the side of my page, in a frame, I want to have an image map that serves as a navigational pane for the whole site (links like 'home', 'about us', 'links'. . . ). From previous experience with websites getting all mucked up when viewed on different sized monitors or with different resolutions, I've made every image on the site resize-able as the the window dimensions are changed, hopefully ensuring nothing will ever get lost off the sides or mutated in wrap-around's. Everything looked great, and I was ready to apply the parameters to the image map, but of course, half-way through programming the imagemap, I realized the inevitable problem: As the image size changes, the co-ordinates of my imagemap will no longer apply to the graphic. I don't want to resort just putting ugly text over the scalable background image (which is where I'm at now) when everything else on the site looks so rich (or so I think). I'm certain that image maps aren't the answer, but is there anything else? My basic problem is that I want an series of links at the side of my page, attatched to buttons designed in photoshop, and totally resizeable as the all the other images on the site. Any help? I have an image of a city map that I would like to use on my website as an image map. There are several areas that I'd like to turn into poly links. Inconveniently, these areas are not nice and square, which means that finding all the coordinates manually will be a major pain. Is there a way for me to select an area on that image that I want to map out, feed it to some program, and get it to spit out all the coordinates for me of my selection? I've tried a plugin that comes with GIMP, and a program called Meracl ImageMap Generator, but they both require to manually set all the poly nodes. It sure would be nice if there was a program or a website service that could take an image with a preselected area and find all the nodes automatically. I have a site with text scrolling over a fixed background - mbccc.net - and I want the background to be an imagemap so's I can link from different parts of it. But I can't make it work. I can make an imagemap work alright. But not on a fixed background image. Is it possible or does making the image a 'background' image and 'fixing' it in position mean that it can't be referenced as an imagemap any more? regards, ab I've found a website that shows my Steam status every amount of time, just like the rest of other websites. This banner or gamecard should show if i'm online, what i'm playing and other stuff that is in the gamecard. The website has an option for yourself to put your own PNG image as the card's background. I entered the link correctly of the image and after that it gave me the codes to put them wherever i want. The problem is that when i submit the code wherever i want (Forums) the image doesnt show but the code in text itself. The PNG had transparent parts so i tried on a pure black background, didnt work either. Then i noticed the code has some different values/elements from the included images that the website comes with. This is the code of my custom PNG image: Code: http://steamsigs.com/steam.php?id=ik....png&tborder=1 And this is with the default image of the website: Code: http://steamsigs.com/steam.php?id=ik...rmal&tborder=1 I also tried different text borders and options. You can try yourself doing the gamecard he www.steamsigs.com You will need a custom Steam ID url, but you can use mine: ikamikaze15 And if it could be something wrong with the image, here it is: http://i1000.photobucket.com/albums/...ndoGR15/ua.png Thanks for helping. Hi, I'm a self-taught web designer with not a lot of experience and need some help please! This website shows up perfectly in Chrome + Firefox, but it completely fails in IE. http://fparchitectural.ca/beta/ I'm guessing it's a css/div issue. Hopefully it is a simple fix. Please Help. Hey all I have just joined these forums as I am learning HTML and CSS. However the book that I am following does not appear to be working. I have created a custom class in css called "Stewart" and a test page to test it however it does not appear as I have defined. Below is the code for the CSS page Quote: <!-- A CSS style sheet --> body { font-size: 10pt; font-family: Arial; color: black; line-height: 14pt; padding-left: 5pt; padding-right: 5pt; padding-top: 5pt; } h1 { <!-- ALso possible to define different classes see SAM's teach yourself HTML and CSS p59 --> background-color: pink; font-size: 14pt; font-family: Arial; font-weight: 20pt; color: red; } h2 { font-size: 12pt; font-family: Arial; font-weight: 20pt; color: red; } h3.silly {font: 36pt Comic Sans; } h3.serious {font: 8pt Arial; } p.subheader { font-weight: bold; color: green; } <!-- Custom Class, use the div heading to create a custom class --> DIV.stewart {font-size: 30pt; color: red; font-style: italic; } And here is the code for the test page Quote: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <!--The above is a link to the css file in this directory --> <title>CSS Test sheet</title> </head> <body> <h1> This is a test sheet for my css, it might possibly look different every time. </h1> <h3 class="silly"> Silly</h3> <p> The above text is silly class of heading 3</p> <h3 class="serious">serious</h3> <p> The above text is serious class of heading 3 </P> <p> <div class="stewart">This is my own custom style</div> </p> </body> </html> Can someone please explain where I am going wrong. I am using IE on WIndows 7. Hi Guys, I have this link: <a href="programs/XMLPoster.exe">programs/XMLPoster.exe</a> It works when i view it in Firefox, but gives me an error when i click it in i.e? Do you know why this is happening? Ideally i want to be able to launch the .exe file and not just ask the user if they want to save it? Thanks, Chloe ~X~ I have a code for div and the strange thing is that it is working in empty html code but if i put it in an existing html code then it will not work! please help!!! i have installed IIS 5.1 in my XP machine but when i type http://localhost it shows a blank page. Hi guys, For some reason, in IE8, on product pages (Example) of my ecommerce site, the 'Size Chart' and 'Email to a Friend' popups don't work, and the product image lightbox won't work either. I have turned pop-up blocker off but they still don't work. These popups work in every other browser I have tested in, including IE7. It seems to only be IE8 that is having this problem. Upon looking at the page source, one thing I have noticed that both the 'Size Chart' and 'Email to a Friend' buttons have in common, is that the popups seem (I'm far from an expert) to be 'triggered' by a span element (class="more") within the HTML. For example: Code: <div class="row "> <label >Size: </label> <strong class="fl"><select name="size" id="size" onchange="checkstock(this.value)"><option value="">Select Size</option><option value="S">S</option><option value="M">M</option><option value="L">L</option><option value="XL">XL</option><option value="XXL">XXL</option></select></strong> <span style="text-decoration: underline;" class="size_chart more" title="size_chart1">+ Size Chart</span> <div style="display: none;" class="size_chart1 hide" > <div class="close"></div> <img src="http://www.projectdisobey.com/disobeyclothing/wp-content/themes/eCommerce3/images/size_chart.jpg" alt="" /> </div> <!-- size chart --> </div> Code: <ul class="fav_link">
<li class="print"><a href="#" onclick="window.print();return false;">Print</a> </li>
<li class="rss"><a href="http://feeds.feedburner.com/DisobeyClothing">RSS</a> </li>
<li class="emailtofriend"><span style="text-decoration: underline;" class="more" title="tellafrnd_div">Email to a Friend</span> </li>
<li class="blank"><span id="tellafrnd_success_msg_span"></span></li>
<li class="blank"><div style="display: none;" id="tellfrnddiv" class="tellafrnd_div hide"> <iframe src="http://www.projectdisobey.com/disobeyclothing/?page=tellafriend_form&pid=402" style="border: medium none ; width: 547px; height: 558px;" frameborder="0" ></iframe> </div> </li>
<li class="share">
<div class="a2a_kit addtoany_list"><a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://www.projectdisobey.com/disobeyclothing/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share"/></a></div>
<script type="text/javascript"><!--
var a2a_config = a2a_config || {};
a2a_config.linkname="Know Your Enemy";
a2a_config.linkurl="http://www.projectdisobey.com/disobeyclothing/?p=402";
a2a_config.color_main = "f3f3e7";a2a_config.color_border = "C0C88A";a2a_config.color_link_text = "332402";a2a_config.color_link_text_hover = "332402";a2a_config.color_bg = "7f6f2";
a2a_config.num_services = 14;
//--></script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script>
</li>
</ul>
I have no idea what could be stopping the lightbox from working. Anybody have any suggestions as to what the problem might be (and how I can rectify it)? If you need more info, let me know... Thanks! I'm new to this forum and was not quite sure where to post this but I am having some trouble putting this code I made into my myspace and making it work. It shows up correctly on the normal browser but when I go to add it to my page it doesn't work. Any help would be appreciated. HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<style type="text/css">
#picturebox {
background: #transparent;
background-image:url('http://img231.imageshack.us/img231/6485/tvphotosmallergs4.jpg');
background-repeat: no-repeat;
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 631px;
}
#moviebox {
background: #FFFFFF;
background-repeat: no-repeat;
position: absolute;
top: 120px;
left: 168px;
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div id="picturebox">
<div id="moviebox">
<object type="application/x-shockwave-flash" width="400" height="300" data="http://www.vimeo.com/moogaloop.swf?clip_id=721534&server=www.vimeo.com&fullscreen=1&show_title=1&show_byline=1&show_portrait=0&color="> <param name="quality" value="best" /> <param name="allowfullscreen" value="true" /> <param name="scale" value="showAll" /> <param name="movie" value="http://www.vimeo.com/moogaloop.swf?clip_id=721534&server=www.vimeo.com&fullscreen=1&show_title=1&show_byline=1&show_portrait=0&color=" /></object>
</div>
</div>
</body>
</html>
Thank you! So this is the website that I got: Quote: http://eksow.com/ This is the source code for it: 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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Eksow Event Design & Management</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript"> function showPictures(n) { obj = document.getElementById('changingPictures'); document.getElementById('bottom').style.top = "0px"; if(n==1) { obj.src="http://eksow.com/images/Eksow_07.jpg"; obj.style.visibility="visible"; } else if(n==2) { obj.src="http://eksow.com/images/Eksow_13_07.jpg";//Change this value to the url of second set of images obj.style.visibility="visible"; } else if(n==3) { obj.src="http://eksow.com/images/Eksow_12_07.jpg";//Change this value to the url of third set of images obj.style.visibility="visible"; } else{} } </script> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> </head> <body> <div id="container"><img src="http://eksow.com/images/Eksow_01.jpg" width="1024" height="261" alt=""> <div id="left" class="rollImages" onclick="showPictures('1')"></div> <div id="middle" class="rollImages" onclick="showPictures('2')"></div> <div id="right" class="rollImages" onclick="showPictures('3');"></div> <img src="http://eksow.com/images/Eksow_07.jpg" alt="Home Page" id="changingPictures"/> <div id="bottom"></div></div> </body> </html> This is the CSS of it: Quote: body { background-color:#000000; width:100%; padding:0px; margin:0px; margin-bottom:10px; } #container { margin:0px auto; width:1024px; padding:0px; text-align:center; } img { border-width:0px; padding:0px; margin:0px; } #left { background-image:url(http://eksow.com/images/Eksow_03.jpg); margin-left:74px; } #left:hover { background-image:url(http://eksow.com/images/Rollover_1_03.jpg); } #middle { background-image:url(http://eksow.com/images/Eksow_04.jpg); width:296px; } #middle:hover { background-image:url(http://eksow.com/images/Rollover_2_04.jpg); } #right { background-image:url(http://eksow.com/images/Eksow_05.jpg); position:relative; } #right:hover { background-image:url(http://eksow.com/images/Rollover_3_05.jpg); } .rollImages { width:292px; height:229px; float:left; cursor:pointer; } #changingPictures { visibility:hidden; } #bottom { height:8px; background-color:red; text-align:center; background-image:url(http://eksow.com/images/Eksow_08.jpg); position:relative; left:50px; top:-260px; } #bottom:hover { background-image:url(http://eksow.com/images/Rollover_4_08.jpg); height:8px; } What I'm trying to do is insert Quote: http://eksow.com/eksow.swf Which is Flash (160x15 px) into the actual website RIGHT UNDERNEATH the 'bottom'. I've tried, and tried, and tried again... But nothing works :S Does anyone know if there is some trick that I have to do or I'm overlooking something? Im not really in the mood of screwing it up, you know? Hi I have loging screen it invokes a html output via php coding. < Code: script type="text/javascript" src="tablesel.js"></script> </head> <body> <menu><ul ondbclick = "process()">BILLITEM</ul> <ul ondbclick = "process()">BILLMAIN</ul> <ul ondbclick = "process()">BILLOFMATL</ul> <ul ondbclick = "process()">BUYER</ul> <ul ondbclick = "process()">CHASSISMASTER</ul> <ul ondbclick = "process()">CODEMAST</ul> <ul ondbclick = "process()">CONTRACTMAST</ul> <ul ondbclick = "process()">CONTRACTOR_CANTEEN</ul> <ul ondbclick = "process()">CONVMASTER</ul> <ul ondbclick = "process()">COSTCENTRE</ul> <ul ondbclick = "process()">COST_PRODUCTMAST</ul> <ul ondbclick = "process()">COST_SPEC</ul> <ul ondbclick = "process()">CUSTMAST</ul> <ul ondbclick = "process()">DEPTMAST</ul> <ul ondbclick = "process()">EMPLMAST</ul> but ondbclick is not working on this element. first i dont know whether this event will work or not in that element so please help me. kanish I'm new to all this. I have designed a Form (see attached ZIP file) that has many TEXT boxes. When the user clicks "Submit" I want to capture the info in the Text boxes and e-mail the results to me. I have no idea how to do this. Can you HELP? Another question: How can I verify data in the text box? For Example--the text box of Quantity, must be numeric. The other text boxes in the table must contain the letter "X" or be blank. The concept of the form I'm trying to do is like an "Order Form". Maybe there is an easier way to do this????? Any help on your part would be most welcome. Some idea of my background--I did some VB programming so I know "logic". I don't know any of the Web languages such as ASP, Java, etc. Thanks, Sam hi i have this code done up it seems to work internally but does not work externally when i send it to someone else. any ideas why this is here is the code Code: <body> <form action="mailto:joebloggs@gmil.com" method="POST" enctype="multipart/form-data" name="EmailTestForm"> <img height="70" border="0" width="400" usemap="#locations" src="http://www.harvest-financial.ie/Contact_Us/upload/Image/harvestlogo.jpg" </br> <br> <br> <INPUT type="radio" name="Answer" value="Yes I am interested in a meeting. Please contact me to arrange a meeting">Yes I am interested in a meeting. Please contact me to arrange a meeting<BR> <INPUT type="radio" name="Answer" value="No I do not require a meeting"> No I do not require a meeting<BR> <INPUT type="radio" name="Answer" value="Yes I am interested in a meeting but at a later date. Please contact me in a months time">Yes I am interested in a meeting but at a later date. Please contact me in a months time<BR> </br> </br> </br> <div align="center"><input type="submit" value="Submit"></div> </body> |
|||||||