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!
Related
I want to open two URLs in different target frames by clicking on an map.
Below is required image of my page. The pages linked with map parts (1-9) are different. I have 18 external linkes for 9 map parts (1-9). So , I want to click on 1....9 map parts to open different pages. Note 1,2,3--- are not aligned and represents coordinates of map (strees/cities, etc).
By clicking on map-part(1).... it should open two pages simulateously
1-right frame, e.g., google, youtube, etc.
2-bottom frame, e.g.,google, youtube, etc.
The code should work for pc as well as mobile also. Here is my try code...
main.html
<html>
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="inside.html" name="left">
<frame <p>Locked in a frame? Click here!</p> name="right">
<frame src="bottom.htm" name="bottom" >
</frameset>
</frameset>
</html>
I want to open, e.g., http://www.w3schools.com link in right frame, and another link, e.g. to Google, in the bottom frame:
inside.html
[![<html>
<head>
<title>CSS </title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
body {
height: 100%;
}
* {
box-sizing: border-box;
}
.image-wrap {
width: 750px;
height: 500px;
padding:2px;
background:url('pic.jpg');
}
.image-wrap a#S000 {
display:block;
text-indent:-10000px;
height:500px;
width:500px;
position:absolute;
left:5px;
top:50px;
}
</style>
</head>
<body>
<div class="image-wrap"> <p><big>overview</big></p>
<a id="S000" href="http://www.w3schools.com"target="_blank">S000</a>
</div>
</body>
</html>]
I know one can do it by using a script, but how can I do it in my code?
Here is a start for you
Do note that some web sites won't run in iframes for security reasons
Updated based on comment using an image map instead, click on the planets to load the iframes
var ais = document.querySelectorAll('.images area');
for (var i = 0; i < ais.length; i++) {
ais[i].addEventListener('click', function(e) {
document.querySelector('iframe[name="right"]').src = e.target.dataset.nr1;
document.querySelector('iframe[name="bottom"]').src = e.target.dataset.nr2;
})
}
html, body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
}
.row {
display: flex;
height: 50vh;
}
.left {
width: 40vw;
}
iframe[name="right"] {
width: 60vw;
height: 50vh;
box-sizing: border-box;
}
iframe[name="bottom"] {
height: 50vh;
box-sizing: border-box;
}
<div class="container">
<div class="row">
<div class="left">
<span><b>Overview</b></span>
<div class="images">
<img src="http://i.stack.imgur.com/HpWre.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="" href="#"
data-nr1="http://www.w3schools.com"
data-nr2="http://www.apple.com">
<area shape="circle" coords="90,58,3" alt="" href="#"
data-nr1="http://www.w3schools.com"
data-nr2="http://www.apple.com">
<area shape="circle" coords="124,58,8" alt="" href="#"
data-nr1="http://www.w3schools.com"
data-nr2="http://www.apple.com">
</map>
</div>
</div>
<iframe name="right" src=""></iframe>
</div>
<iframe name="bottom" src=""></iframe>
</div>
Below code works. You will have to remove the styles and use a stylesheet instead.
<iframe name="left_side" src="http//www.google.com" width="50%"
height="50%" frameBorder="0"></iframe>
<iframe name="right_side" src="http//www.google.com" width="50%"
height="50%" frameBorder="0"></iframe>
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.
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/
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>
I am trying to make a text box appear when hover over hotspot on image map.
This is what I did to make text to appear when I hover over.
<p class="ms-rteFontSize-3"><map name="FPMap0" id="FPMap0">
<area title="Click to view" href="http://google.com" shape="rect" coords="26, 106, 133, 237"/>
<area title="Click to view" href="http://yahoo.com" shape="rect" coords="322, 113, 414, 250"/>
<area title="Click to view" href="http://ask.com" shape="rect" coords="402, 35, 488, 96"/>
<area title="Click to view" href="http://naver.com" shape="rect" coords="598, 115, 682, 254"/></p>
But instead of this, I want to make colored, visible text box to appear when I hover over. Is it something CSS is required? I am not familiar with CSS, so not sure what to apply here.
So I edited my code to this
<html>
<head>
<script src="/sites/JQueryDemo/JS/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/sites/JQueryDemo/JS/jquery.SPServices-2013.01.js" type="text/javascript"></script>
<script src="//www.outsharked.com/scripts/jquery.imagemapster.js"></script>
</head>
<body>
<img id="predflow" src="http://http://www.vectortemplates.com/raster/batman-logo-big.gif"
style="width:400px;height:240px;" usemap="#predflow-map">
<map name="predflow-map">
<area shape="rect" data-name="a,all" coords="36,46,121,131" href="google.com" />
<area shape="rect" data-name="b,all" coords="113,76,198,161" href="yahoo.com" />
<area shape="rect" data-name="c,all" coords="192,50,277,135" href="ask.com" />
<area shape="rect" data-name="d,all" coords="262,60,347,145" href="naver.com" />
</map>
<div style="width:390px; height: 120px; font-size: 12px; ">
<div id="predflow-caption" style="clear:both;border: 1px solid black; width: 400px; padding: 6px; display:none;">
<div id="predflow-caption-header" style="font-style: italic; font-weight: bold; margin-bottom: 12px;"></div>
<div id="predflow-caption-text"></div>
</div>
</div>
<script type="text/javascript">
var inArea,
map = $('#predflow'),
captions = {
a: ["google"],
b: ["yahoo"],
c: ["ask"],
d: ["naver"]
},
single_opts = {
fillColor: '000000',
fillOpacity: 0,
stroke: true,
strokeColor: 'ff0000',
strokeWidth: 2
},
all_opts = {
fillColor: 'ffffff',
fillOpacity: 0.6,
stroke: true,
strokeWidth: 2,
strokeColor: 'ffffff'
},
initial_opts = {
mapKey: 'data-name',
isSelectable: false,
onMouseover: function (data) {
inArea = true;
$('#predflow-caption-header').text(captions[data.key][0]);
$('#predflow-caption-text').text(captions[data.key][1]);
$('#predflow-caption').show();
},
onMouseout: function (data) {
inArea = false;
$('#predflow-caption').hide();
}
};
opts = $.extend({}, all_opts, initial_opts, single_opts);
map.mapster('unbind')
.mapster(opts)
.bind('mouseover', function () {
if (!inArea) {
map.mapster('set_options', all_opts)
.mapster('set', true, 'all')
.mapster('set_options', single_opts);
}
}).bind('mouseout', function () {
if (!inArea) {
map.mapster('set', false, 'all');
}
});
</script>
</body>
</html>
Still image map is working fine, but nothing appears when I hover over. I added jQuery plugin to SharePoint, example from here works fine on SharePoint page.
Here is how to do what you want in straight jQuery/javascript:
Working jsFiddle here
HTML:
Instructions: Mouse over computer's monitor to see hidden DIV
<div id="imagemap">
<img src="http://img716.imageshack.us/img716/8287/3ylp.jpg" width="275" height="207" usemap="#Map" border="0" />
<map name="Map">
<area shape="poly" coords="105,26,107,126,257,140,256,27" href="#" id="CUST_1" name="CUST:1" />
<area shape="poly" coords="10,21,14,178,71,184,69,19" href="#" id="CUST_2" name="CUST:2" />
<area shape="poly" coords="113,145,94,172,241,192,251,164,250,164" href="#" id="CUST_3" name="CUST:3" />
</map>
<p>
<div id="myDiv">This DIV hidden unless hover over the computer's monitor</div>
</p>
</div>
<!-- Yellow DIV ID numbers overlaid on top of computer components -->
<div id="num_cust1">1</div>
<div id="num_cust2">2</div>
<div id="num_cust3">3</div>
javascript/jQuery:
function hovIn() {
var areaID = $(this).attr('id');
//alert('['+areaID+']');
if (areaID == 'CUST_1') {
$('#myDiv').show();
}
}
function hovOut() {
$('#myDiv').hide();
}
$('map area').hover(hovIn, hovOut);
CSS:
#num_cust1 {
padding: 10px;
background-color:yellow;
position:absolute;
top:60px;
left:180px;
}
#num_cust2 {
padding: 10px;
background-color:yellow;
position:absolute;
top:60px;
left:40px;
}
#num_cust3 {
padding: 10px;
background-color:yellow;
position:absolute;
top:160px;
left:180px;
}
#myDiv {
display:none;
width:50%;
height:50px;
padding: 10px;
background-color:skyblue;
}
Are you open to using jQuery?
If so, have you heard of the ImageMapster plugin?
See this link for demos: http://www.outsharked.com/imagemapster/default.aspx?demos.html
Since ImageMapster is a jQuery plugin, you will need the following lines in the head tag of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//www.outsharked.com/scripts/jquery.imagemapster.js"></script>
The first line loads the jQuery library, and the next line loads the ImageMapster plugin.
After that, it's just the code to make the imagemap work.
See the demos above for what you can do.