I'm trying to get maphilight to toggle the highlighting of my hotspots when the user clicks a link. Nothing happens when the link is clicked though. What am I missing?
Thank you much. Code follows.
<body>
<div class="Room">
<div class="Wall">
<img src="Rooms/NorthBlank.JPG" usemap="#NorthMap" border="0" class="hilight" />
<map name="NorthMap" id="NorthMap">
<area id="plant" shape="poly" coords="319,388,338,402,399,402,437,392,410,372,392,370,385,332,356,331,352,374" href="Objects/Plant.jpg" rel="lightbox" />
</map>
</div>
</div>
<div class="MenuBar">
<img id="Information" src="Icons/Info.PNG" />
</div>
</body>
</html>
<script>
$('#InfoLink').click(function(e) {
e.preventDefault();
var data = $('.hilight').mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$('.hilight').data('maphilight', data).trigger('alwaysOn.maphilight');
});
</script>
Related
I'm trying to make a page that loads custom content into a div based on a click in an image map.
This is just some of the code, but the problem is that the content in the div with ID piece does not change when I click the link with ID dec.
I have tried normal links and many other techniques, but can't seem to get it working.
Appreciate all help!
<map name="cake_01Map">
<area shape="poly" coords="249,246,250,25,130,46,249,246" href="#" alt="Desember" id="dec">
<area shape="poly" coords="365,47,250,246,252,23" href="#" alt="Januar" id="jan">
<area shape="poly" coords="448,134,252,251,368,49" href="#" alt="Februar" id="feb">
</map>
<div class="container">
<div class="row">
<div class="col c4" id="piece">Content here</div>
<div>
<img src="img/kake_01.png" alt="" width="500" height="500" usemap="#cake_01Map" id="cake_01" />
<img src="img/kake_02.png" width="500" height="500" alt="" usemap="#cake_01Map" id="cake_02" />
</div>
</div>
</div>
<script>
$('#dec').click(function() {
$('#piece').html('Content December');
});
$('#jan').click(function() {
$('#piece').html('Content January');
});
$('#feb').click(function() {
$('#piece').html('Content February');
});
</script>
I have a slider which attaches slides through external page attached through data attributes.
Here is what's happening:-
Main Page
<div id="sitewrapper">
<section class="sliderwrapper">
<div id="slider" data-source="slides-page.html" data-speed="500" data-easing="swing">
<ul>
</ul>
</div>
<div id="loader"><span id="load"></span></div>
<a class="button" id="back"></a>
<a class="button" id="next"></a>
</section>
<!--end sitewrapper-->
</div>
<script>
$(function() { //run when the DOM is ready
$('.internalclick').click(function(e) {
alert("I clicked Area Tag" + $(this).attr('data-direct'));
});
});
</script>
Slides page (slides-page.html)
<li class="hslide" data-id="1"><img src="content/01.png" usemap="#Map">
<map name="Map">
<area shape="rect" coords="331,158,538,297" href="#" class="internalclick" data-direct="I-need-to-direct">
<area shape="rect" coords="546,154,745,305" href="#">
<area shape="rect" coords="331,311,543,445" href="#">
<area shape="rect" coords="550,309,733,443" href="#">
</map>
</li>
<li class="hslide" data-id="2"><img src="content/02.png"></li>
<li class="hslide" data-id="3"><img src="content/03.png"></li>
<li class="hslide" data-id="4"><img src="content/04.png"></li>
Problem
Now above all works fine when I try to add a Click function on two the list elements (slides) in the slides page. Notice the first where I added href="#" class="internalclick" data-direct="I-need-to-direct". Now the problem is to access it.
When I am trying to run a small Click function in the main page, I am unable to run the function. Any idea how I can make a click function that scopes the area tag in the slides page?
Thanks
The problem is internalclick is loaded after you add the event handlers. You need to use event delegation.
$("#sitewrapper").on("click",".internalclick", function(e) {
var direct = $(this).data("direct");
console.log(direct);
});
I am a total noob, so please go easy.
I am trying to replace one image with a second image while hovering on a different element. My problem is that only the first image is being replaced by the link images. I've give each image an ID, I just am not sure how to apply it.
Thank you in advance for any help you can provide!
Here is what I have so far:
Script:
<script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("http://www.dxmgp.com/group/images/color_si.jpg", "http://www.dxmgp.com/group/images/bw_si.jpg","http://www.dxmgp.com/group/images/color_dxm.jpg", "http://www.dxmgp.com/group/images/bw_dxm.jpg","http://www.dxmgp.com/group/images/color_tsg.jpg", "http://www.dxmgp.com/group/images/bw_tsg.jpg","http://www.dxmgp.com/group/images/color_image.jpg", "http://www.dxmgp.com/group/images/bw_image.jpg")
</script>
HTML:
<div id="wrap">
<div id="upper">
<div class="u-top">
<img src="http://www.dxmgp.com/group/images/bw_si.jpg" name="targetimage" id="si" border="0" />
<img class="picright" src="http://www.dxmgp.com/group/images/bw_dxm.jpg" name="targetimage" id="dxm" border="0" />
</div>
<div class="u-mid">
<img src="http://www.dxmgp.com/group/images/bw_owners.png" />
</div>
<div class="u-low">
<img class="picleft" src="http://www.dxmgp.com/group/images/bw_tsg.jpg" id="tsg" />
<img class="dxmlogo" src="http://www.dxmgp.com/group/images/logo_dxm.png" />
<img class="picright" src="http://www.dxmgp.com/group/images/bw_image.jpg" id="img" />
</div>
</div>
<div id="lower">
<div class="dots"><img src="http://www.dxmgp.com/group/images/topdots.png"></div>
<div class="logos">
<a href="http://www.thescoutguide.com">
<img class="picll" src="http://www.dxmgp.com/group/images/logo_tsg.png"></a>
<img class="picmid" src="http://www.dxmgp.com/group/images/logo_si.png">
<a href="http://www.imagebydxm.com">
<img class="piclr" src="http://www.dxmgp.com/group/images/logo_image.png"></a>
</div>
<div class="dots"><img src="http://www.dxmgp.com/group/images/lowdots.png"></div>
</div>
</div>
How about something like this? Consider you have a div containing image1.png. When you mouse over a hyperlink, you want to replace image1.png with image2.png. Then, when you move your mouse away from the hyperlink, image2.png will once again be replaced with image1.png:
This is your div containing the image:
<div id="image">
<img src="image1.png" />
</div>
This is the hyperlink:
Mouse over to change image
Here are the JavaScript functions that will replace the inner HTML of the div with different images:
<script type="text/javascript">
function mouseOver() {
document.getElementById("image").innerHTML = '<img src="image2.png" />';
}
function mouseOut() {
document.getElementById("image").innerHTML = '<img src="image1.png" />';
}
</script>
Let me know if this is what you are looking for.
I have a popup div with more than one span element how to display another span
javascript
$(document).ready(function() {
$(".levert").click(function () {
$("#popUpDiv").show("slow");
});
});
HTML
<div id="popUpDiv" style="display:none">
<img src="logo_klein.png" width="117" height="33" class="logoklein1" ><p
id="headertextbox">is</p></img>
<span class="textbox1"></span>
<span class="textbox2"></span>
<span class="textbox3"></span>
</div>
</div>
Imagemap with links
<img id="logo" src="./logo.png" alt="Phlox" usemap="#links"></img>
<map name="links">
<area shape="circle" coords="291,46,46" href="#" class="levert"></area>
<area shape="circle" coords="55,245,46" href="#" class="is"></area>
</map>
Do this when you want to clear popupDiv and add span with class textbox2
$("#popUpDiv").empty().append('.textbox2').show("slow");
I used jquery.maphilight, html map and area on the layout
This is my layout codepen.
(codepen here)
I want append status icon/image on red color area like this
so....what should I do?
If jquery.maphilight can't do that, Could recommend me other javascript?
<!DOCTYPE html>
<html>
<head></hrad>
<body>
<div>
<img style="width: 800px;height:600px;background-repeat:no-repeat;" src="https://online.visual-paradigm.com/images/features/floor-plan-designer/thumbnails/work-office-floorplan-template-02.png" alt="" usemap="#PClayout">
</div>
<map name="PClayout">
<!-- working -->
<area shape="rect" coords="200,100,300,200" id='PC1' href="#">
<!-- close-->
<area shape="rect" coords="490,100,600,200" id='PC2' href="#">
<!-- Error-->
<area shape="rect" coords="200,250,300,350" id='PC3' href="#">
</map>
</body>
</html>
function layoutalert(el, Color){
var data = $(el).data('maphilight') || {};
data.alwaysOn = true;
data.fillColor = Color;
data.strokeColor = Color;
$(el).data('maphilight', data).trigger('alwaysOn.maphilight');
$(el).data('maphilight', data).trigger('fillColor.maphilight');
$(el).data('maphilight', data).trigger('strokeColor.maphilight');
}
layoutalert("#PC1", '00ff00')
layoutalert("#PC2", 'ff0000')
layoutalert("#PC3", 'ff0000')
$('img[usemap]').maphilight();