Image Map not working in Explorer - html

For some reason my image map is working in every browser but Internet Explorer,
I cant seem to figure out why and also can't test it very accurately because I am on a Mac.
<div id="joinnow">
<div style="text-align:center; width:358px; margin-left:auto; margin-right:auto;">
<map id="imgmap20131021153742" name="imgmap20131021153742"><area shape="rect" alt="" title="" coords="23,26,162,109" href="https://signup.myiclubonline.com/iclub/signup/home.htm#plans?clubNumber=3790" target="_blank" /><area shape="rect" alt="" title="" coords="22,114,158,188" href="https://signup.myiclubonline.com/iclub/signup/home.htm#plans?clubNumber=4790" target="_blank" /><area shape="rect" alt="" title="" coords="201,103,340,185" href="http://therac.wufoo.com/forms/z7x4a3/" onclick="window.open(this.href, null, 'height=825, width=475, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false" title="TheRAC" /></map>
<img src="http://www.therac.net/images/joinnow.jpg" USEMAP="#imgmap20131021153742" />
</div>
</div>
The CSS for the div with ID "joinnow" is...
#joinnow
{
font-size:18px;
font-weight:500;
font-family:Tahoma, Geneva, sans-serif;
color:#fff;
text-align:center;
position:relative;
float:right;
background-image:url(images/joinnow.jpg);
height: 195px;
width:179px;
}
Thanks in advance for any help provided!

Worked fine here, Internet Explorer 11
usemap is lowercase
<div id="joinnow">
<div style="text-align:center; width:358px; margin-left:auto; margin-right:auto;">
<map id="imgmap20131021153742" name="imgmap20131021153742"><area shape="rect" alt="" title="" coords="23,26,162,109" href="https://signup.myiclubonline.com/iclub/signup/home.htm#plans?clubNumber=3790" target="_blank" /><area shape="rect" alt="" title="" coords="22,114,158,188" href="https://signup.myiclubonline.com/iclub/signup/home.htm#plans?clubNumber=4790" target="_blank" /><area shape="rect" alt="" title="" coords="201,103,340,185" href="http://therac.wufoo.com/forms/z7x4a3/" onclick="window.open(this.href, null, 'height=825, width=475, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false" title="TheRAC" /></map>
<img src="http://www.therac.net/images/joinnow.jpg" usemap="#imgmap20131021153742" />
</div>
</div>
.
#joinnow
{
font-size:18px;
font-weight:500;
font-family:Tahoma, Geneva, sans-serif;
color:#fff;
text-align:center;
position:relative;
float:right;
background-image:url('images/joinnow.jpg');
height: 195px;
width:179px;
}
http://jsfiddle.net/6LN6C/2/

Related

Linking each image to the site it is from

This is my code:
<a target="_blank" href="http://weknowyourdreams.com">Family</a>
<img src="http://weknowyourdreams.com/images/family/family-02.jpg" height="140" width="300">
</a>
<a target="_blank" href="http://chess.com">Chess</a>
<img height="140" width="300" alt="Chess game" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/ChessSet.jpg/647px-ChessSet.jpg">
</a>
<a target="_blank" href="http://okcstorm.com/index.php/basketball/">Basketball court</a>
<img src="http://okcstorm.com/wp-content/uploads/2016/12/cropped-Basketball-2-1.jpg" width="300" height="200">
What I want to achieve is to link them each to the site that I've got them from. But, the problem is the phone in the code avengers keep telling me this error:
Uncaught TypeError: Cannot read property 'ClearPromptText' of null
I don't know what that means, please help.
.image-f{
float:left;
display:block;
margin-right:10px;
width:300px;
}
.image-f img{
float:left;
width:100%;
height:140;
}
<a target="_blank" class="image-f" href="http://weknowyourdreams.com/" >Family
<img src="http://weknowyourdreams.com/images/family/family-02.jpg" >
</a>
<a target="_blank" class="image-f" href="http://chess.com">Chess
<img alt="Chess game" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/ChessSet.jpg/647px-ChessSet.jpg">
</a>
<a target="_blank" class="image-f" href="http://okcstorm.com/index.php/basketball/">Basketball court
<img src="http://okcstorm.com/wp-content/uploads/2016/12/cropped-Basketball-2-1.jpg" ></a>

Why is there a massive "ghost" google + button on my (unfinished) site?

Okay, so I and some other people are build a site in webplus X5, and when we open the html in IE 10 (Chrome seems to not be opening lately, but thats another problem) we get this:
And, this is what that page is in webplus.
HTML code as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Generator" content="Serif WebPlus X5">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
<title>Home</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style type="text/css">
body {margin: 0px; padding: 0px;}
.Artistic-Body-C
{
font-family:"Arial Black", sans-serif; font-weight:700; text-decoration:underline; font-size:54.0px; line-height:1.41em;
}
.Artistic-Body-C-C0
{
font-family:"Arial Black", sans-serif; font-weight:700; font-size:54.0px; line-height:1.41em;
}
.Artistic-Body-C-C1
{
font-family:"Arial Black", sans-serif; font-weight:700; text-decoration:underline; font-size:32.0px; line-height:1.41em;
}
.Body-C
{
font-family:"Arial Black", sans-serif; font-size:27.0px; line-height:1.41em;
}
.Body-C-C0
{
font-family:"Arial Black", sans-serif; font-size:15.0px; line-height:1.47em;
}
.Artistic-Body-C-C2
{
font-family:"Arial Black", sans-serif; color:#ffffff; font-size:19.0px; line-height:1.42em;
}
.Body-C-C1
{
font-family:"Arial Black", sans-serif; color:#ffffff; font-size:16.0px; line-height:1.44em;
}
.Button1,.Button1:link,.Button1:visited{text-decoration:none;display:block;position:absolute;background-color:transparent;}
.Button1:focus{outline-style:none;}
.Button1 span,.Button1:link span,.Button1:visited span{color:#000000;font-family:"Arial Black",sans-serif;font-weight:normal;text-decoration:none;text-align:center;text-transform:none;font-style:normal;left:0px;top:0px;width:107px;height:20px;font-size:16px;display:block;position:absolute;cursor:pointer;}
.Button2,.Button2:link,.Button2:visited{text-decoration:none;display:block;position:absolute;background-color:transparent;}
.Button2:focus{outline-style:none;}
.Button2 span,.Button2:link span,.Button2:visited span{color:#5c7e13;font-family:"Arial Black",sans-serif;font-weight:normal;text-decoration:none;text-align:center;text-transform:none;font-style:normal;left:0px;top:0px;width:107px;height:20px;font-size:16px;display:block;position:absolute;cursor:pointer;}
.Button2:hover span{color:#000000;}
.Button2:active span{color:#000000;}
</style>
<script type="text/javascript" src="wpscripts/jspngfix.js"></script>
<link rel="stylesheet" href="wpscripts/wpstyles.css" type="text/css">
<script type="text/javascript">var blankSrc = "wpscripts/blank.gif";
</script>
</head>
<body text="#000000" style="background-color:#ffffff; text-align:center; height:900px;">
<div style="background-color:transparent;text-align:left;margin-left:auto;margin-right:auto;position:relative;width:1440px;height:900px;">
<img src="wpimages/wp817e53a4_06.png" width="1440" height="900" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:0px;top:0px;">
<img src="wpimages/wpc73afde9_06.png" width="202" height="193" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:15px;top:13px;">
<div style="position:absolute;left:270px;top:17px;width:649px;height:76px;">
<div class="Wp-Artistic-Body-P">
<span class="Artistic-Body-C">S.N.A.K.E.S</span><span class="Artistic-Body-C-C0"> </span><span class="Artistic-Body-C-C1">Animal shelter</span></div>
</div>
<div id="txt_1" style="position:absolute;left:250px;top:202px;width:937px;height:590px;overflow:hidden;">
<p class="Wp-Body-P"><span class="Body-C">Here at S.N.A.K.E.S, (Serpent National Anti-Kruelty* Eviromental Shelter) we care
for those that are not typically considered as pets, in the form of snakes! Our slithery
friends are not what those that are faint-hearted consider pets, but those adventurous
souls out there may happily adopt on of our various serpents. Those people can look
here to donate and look at these snakes, as well as contact us, and apply to volunteer
as a snake carer.</span></p>
<p class="Wp-Body-P"><span class="Body-C">-To navigate, use the links on the left. Click the logo or the home button to return
here. There is various images along the<img src="wpimages/wp2f8a775f_06.png" width="920" height="900" border="0" onload="OnLoadPngFix()" title="" alt="" style="display:block;position:absolute;top:0px;left:0px;"> right: they are just images or funny snake-things
we have found.</span></p>
<p class="Wp-Body-P"><span class="Body-C-C0"><br></span></p>
<p class="Wp-Body-P"><span class="Body-C-C0">*Kruelty is spelt wrong on purpose, to allow the name to work.</span></p>
</div>
<img src="wpimages/wp82934362_05_06.jpg" width="265" height="166" border="0" alt="" style="position:absolute;left:1175px;top:0px;">
<form id="site_search_1" action="" onSubmit="return false;" style="position: absolute; top:212px; left:0px; width:250px; height:22px;margin: 0; padding: 0;">
<input id="site_search_1_input" name="site_search_1_input" onkeypress="if (event.keyCode==13) window.location.href='page4.html?site_search_results_1='+document.getElementById('site_search_1_input').value+'&depth=0';" style="width: 107px;" type="text"><div style="display: inline"><button onclick="window.location.href='page4.html?site_search_results_1='+document.getElementById('site_search_1_input').value+'&depth=0';" style="width: 133px;">Search this site!</button></div>
</form>
<img src="wpimages/wpa7694a4a.gif" width="267" height="151" border="0" alt="" style="position:absolute;left:1173px;top:166px;">
<img src="wpimages/wpccc61754_06.png" width="98" height="38" border="0" title="" alt="Home" onload="OnLoadPngFix()" style="position:absolute;left:251px;top:169px;">
<div style="position:absolute;left:267px;top:90px;width:601px;height:73px; background-image:url('wpimages/wpaff7835e_06.png');">
<span>Home</span>
<span>Volunteer</span>
<span>Donations</span>
<span>Contact us</span>
<span>Gallery</span>
</div>
<img src="wpimages/wp90a589a8_06.png" width="1440" height="101" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:0px;top:799px;">
<div style="position:absolute;left:7px;top:799px;width:185px;height:27px;">
<div class="Wp-Artistic-Body-P">
<span class="Artistic-Body-C-C2">Explore the site</span></div>
</div>
<map id="map0" name="map0">
<area shape="rect" coords="212,6,335,26" href="page6.html" alt="">
<area shape="rect" coords="86,5,206,25" href="page3.html" alt="">
<area shape="rect" coords="1,4,67,28" href="home page.html" alt="">
</map>
<img src="wpimages/wp70aa4b65_06.png" width="339" height="27" border="0" title="" alt="Donations" onload="OnLoadPngFix()" usemap="#map0" style="position:absolute;left:8px;top:836px;">
<map id="map1" name="map1">
<area shape="rect" coords="210,7,300,26" href="page9.html" alt="">
<area shape="rect" coords="0,3,128,26" href="page10.html" alt="">
</map>
<img src="wpimages/wpd689eff4_06.png" width="302" height="27" border="0" title="" alt="Gallery" onload="OnLoadPngFix()" usemap="#map1" style="position:absolute;left:8px;top:863px;">
<img src="wpimages/wp5533b116.gif" width="64" height="24" border="0" title="" alt="Home" style="position:absolute;left:9px;top:840px;">
<img src="wpimages/wp8183884b_06.png" width="326" height="55" border="0" title="" alt="Share this site" onload="OnLoadPngFix()" style="position:absolute;left:479px;top:797px;">
<img src="wpimages/wp2ce0a75d_06.png" width="47" height="47" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:478px;top:853px;">
<img src="wpimages/wpb26f87b1_06.png" width="51" height="51" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:535px;top:849px;">
<img src="wpimages/wp2f8a775f_06.png" width="48" height="47" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:593px;top:853px;">
<img src="wpimages/wp007bb409_06.png" width="48" height="48" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:648px;top:852px;">
<div id="txt_37" style="position:absolute;left:950px;top:799px;width:490px;height:101px;overflow:hidden;">
<p class="Wp-Body-P"><span class="Body-C-C1">All images Copyrighted by their rightful owners. The SNAKES logo is copyrighted to
SNAKES Animal shelter © 2015 The Facebook, Twitter, Google+ and Instagram logos are
property of their relevant companies.</span></p>
</div>
</div>
</body>
</html>​
(I Would add the 'webplus' tag, but there is not one :(
-EDITS-
Edit 1 - Since the ghost copy matches the dimensions of the original, i tried modifying th original. The result of this was a pixelated version of my problem.
-Edit 2- I have worked out it seems to be related to the text box. We don't know why, but that text seems to be causing it. Will tinker with it 16/10/15
Alright, so I know this is not a universal fix ( Or even a fix) but I found out that, for some bizarre reason, the text:
Here at S.N.A.K.E.S, (Serpent National Anti-Kruelty* Eviromental Shelter) we care
for those that are not typically considered as pets, in the form of snakes! Our slithery
friends are not what those that are faint-hearted consider pets, but those adventurous
souls out there may happily adopt on of our various serpents. Those people can look
here to donate and look at these snakes, as well as contact us, and apply to volunteer
as a snake carer.
Plus The font, ariel black, plus the text size, makes it happen. upon removing and re-adding the text with a larger font, it disappeared! Yay, no more scaring people at 8.30 in the morning.

Removing blue links in an image map HTML

I'm building an e-mail for a client with a html map. However I can't seem to get the blue line around links (after they are clicked) to disappear.
I need help.
<p> <br>
<img alt="Hogan" src="http://lsa5.0.assets.s3.amazonaws.com/wp-content/uploads/2014/12/club_DEM_HK-LifeStyleAsia.jpg"
style="border-style: none"
usemap="#map1417501545030"><map
border:="0"
border-color="transparent"
id="map1417501545030"
name="map1417501545030"
usemap="#map1417501545030]">
border:="0" <area alt="" border="0" coords="300,115,347,132" href="http://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=tf&c=20&mc=click&pli=11769974&PluID=0&ord=%%CACHEBUSTER%%"
shape="alt="""
target="_self"
title="">
<area alt="" border="0" coords="9,925,631,1527" href="http://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=tf&c=20&mc=click&pli=11769971&PluID=0&ord=%%CACHEBUSTER%%"
shape="rect"
target="_self"
title="">
<area alt="" border="0" coords="329,681,632,911" href="http://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=tf&c=20&mc=click&pli=11769977&PluID=0&ord=%%CACHEBUSTER%%"
shape="rect"
target="_self"
title="">
Try setting
style=" outline: none;"
to the element of the link.
Below should do the trick:
style="outline: none;"
And here i've added it to your HTML.
<p> <br>
<img alt="Hogan" src="http://lsa5.0.assets.s3.amazonaws.com/wp-content/uploads/2014/12/club_DEM_HK-LifeStyleAsia.jpg"
style="border-style: none"
usemap="#map1417501545030"><map
border:="0"
border-color="transparent"
id="map1417501545030"
name="map1417501545030"
usemap="#map1417501545030]">
border:="0" <area alt="" border="0" coords="300,115,347,132" href="http://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=tf&c=20&mc=click&pli=11769974&PluID=0&ord=%%CACHEBUSTER%%"
shape="alt="""
target="_self"
title="" style="outline: none;">
<area alt="" border="0" coords="9,925,631,1527" href="http://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=tf&c=20&mc=click&pli=11769971&PluID=0&ord=%%CACHEBUSTER%%"
shape="rect"
target="_self"
title="" style="outline: none;">
<area alt="" border="0" coords="329,681,632,911" href="http://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=tf&c=20&mc=click&pli=11769977&PluID=0&ord=%%CACHEBUSTER%%"
shape="rect"
target="_self"
title="" style="outline: none;">

How to make round mapped image change on hover?

I have a round image which I managed to find how to map in a previous question. I now wonder how I can make this image change when i hover over it. It has a mapped area. I have a problem on that.
HTML version without CSS where i believe that the " usemap="#imagechange" " is causing the problem:
<img src="1.png"
onmouseover="this.src='2.png'"
onmouseout="this.src='1.png'"
width="100" height="100"
alt="usemap" border="0"
usemap="#imagechange"/>
<map name="imagechange">
<area shape="circle" coords="50,50,50" href="image.com" />
</map>
It works only when I am inside the area (= 100x100 area MINUS the circle area).
I also have a version with css which doesnt work at all.
HTML version with CSS:
div class="imagechange" >
<img src='foundation/images/Twitter.png'
title="Map Image"
alt="usemap" border="0"
usemap="#imagechange"/>
<map name="imagechange">
<area shape="circle" coords="50,50,50" href="index.html" />
</map>
CSS
.imagechange {
width: 100px;
height:100px;
display:block;
overflow:hidden;
border-radius:50px;
-webkit-border-radius:50px;
}
.imagechange:hover {
border-radius:0px;
-webkit-border-radius:0px;
}
Use this:
<a href='http://www.google.com/'>
<img src='1.png' onmouseover="this.src='2.png'" onmouseout="this.src='1.png'" style='border:0px; border-radius:999px; -webkit-border-radius:999px;'/>
</a>

Text behind image

I made a navbar. Here's the code:
<style type="text/css">
.topbackground {
background-repeat:no-repeat;
background-position: top;
height: 150px;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#FFFFFF;
}
.realnewsbg {
background-image: url(http://tinkatips.hol.es/nav.png);
width: 1000px;
height: 122px;
float:left;
margin-top:-130px;
margin-left:120px;
text-align:center;
}
.realnews {
background-image: url(http://deltaflow.com/themes/deltaflow/images/pixel_transparent.gif);
width: 1000px;
height: 122px;
float:left;
margin-top:-40px;
margin-left:220px;
text-align:left;
}
.tttime {
width: 156px;
height: 122px;
padding-top:-0px;
margin-top:-40px;
margin-left:850px;
text-align:center;
}
body {background-color:#b0c4de;}
</style>
<style type="text/css">
#ajaxticker1{
width: 1000px;
height: 100px;
}
#ajaxticker1 div{ /*IE6 bug fix when text is bold and fade effect (alpha filter) is enabled. Style inner DIV with same color as outer DIV*/
}
.someclass{ //class to apply to your scroller(s) if desired
}
</style>
<script src="ajaxticker.js" type="text/javascript">
/***********************************************
* Ajax Ticker script (txt file source)- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>
<body>
<center><div class="topbackground">
<img id="Image-Maps_3201307070909053" src="http://deltaflow.com/themes/deltaflow/images/pixel_transparent.gif" usemap="#Image-Maps_3201307070909053" border="0" width="1000" height="122" alt="" />
<map id="_Image-Maps_3201307070909053" name="Image-Maps_3201307070909053">
<area shape="rect" coords="19,6,196,66" href="http://www.google.com" alt="" title=""    />
<area shape="rect" coords="232,7,409,67" href="http://www.google.com" alt="" title=""    />
<area shape="rect" coords="438,5,615,65" href="http://www.twitter.com/" alt="" title=""    />
<area shape="rect" coords="651,7,828,67" href="http://www.google.com" alt="Coming Soon !" title="Coming Soon !"    />
<area shape="rect" coords="998,120,1000,122" href="http://www.image-maps.com/index.php?aff=mapped_users_3201307070909053" alt="Image Map" title="Image Map" />
</map><div class="realnewsbg"></div>
<div class="realnews"><script type="text/javascript">
var xmlfile="tickercontent.txt" //path to ticker txt file on your server.
//ajax_ticker(xmlfile, divId, divClass, delay, optionalfadeornot)
new ajax_ticker(xmlfile, "ajaxticker1", "someclass", [3500], "fade")
</script></div>
<div class="tttime">
<script type="text/javascript" src="http://www.24webclock.com/clock24.js"></script>
<table border="0" bgcolor="#a0a0a0" cellspacing=1 cellpadding=3 class="clock24st" style="line-height:14px; padding:0;">
<tr><td bgcolor="#FFFFFF" class="clock24std" style="font-family:arial; font-size:12px;"><img src="http://www.24webclock.com/ico.gif" width="14" height="14" border="0" alt="Kostenlose Uhr fur die Homepage" align="left" hspace="2"> <span class="clock24s" id="clock24_77176" style="color:#6393C3;">free clock for website</span></td></tr>
</table>
<script type="text/javascript">
var clock24_77176 = new clock24('77176',0,'%HH:%nn:%ss %P','en');
clock24_77176.daylight('GB'); clock24_77176.refresh();
</script></div>
</div>
</div>
<div class="header"></div></div></body>
You can find the additional files here: http://www.dynamicdrive.com/dynamicindex2/ajaxticker.htm. The thing is that because of the clock the ticker goes behind the navbar (nav.png). How could I stop this?
Use z-index to make the clock go in front, you could do this by setting the z-index of the navbar to -1:
z-index: -1;
Fixed it!
Just moved the clock div under the header one!