I have a static image made interactive using the concept of HTML maps.
Coordinates of the image set by uploading on https://imagemap.org/
Expected Behavior:
An overlay should display on hover in its respective box. For example, when the mouse hovers over red box, the overlay text should come in the red box itself, if it hovers on green then in green and so on.
Current Behavior:
The overlay text position is not coming in its respective box. It is displayed at the bottom. To achieve this, I am thinking of appending the div that contains the text right after the respective area tag when it is clicked.
My code:
<body>
<div class="interactive-map" >
<img src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
<div class="card" style="width:40%; height: 10%;">
<div class="card-body">
This is some text within a card body.
</div>
</div>
<map name="image_map">
<area id="one" title="Red" coords="25,33,68,65" shape="rect" data-placement="25,33,68,65">
<area title="Green" coords="132,30,194,67" shape="rect">
<area title="Blue" coords="22,147,74,192" shape="rect">
<area title="Yellow" coords="131,144,197,188" shape="rect">
</map>
</div>
</body>
area{
cursor: pointer;
}
$('area').hover(function(){
????
})
Fiddle- https://jsfiddle.net/woke_mushroom/2u3kbnv9/14/
I think easiest way to show content inside a certain "area" is to make it a child-element of that area. You can use any block-element (e.g. <div></div>) as area. You will be be way more flexible this way as with using image maps.
Also showing contents when hovering can be achieved without any javascript with the :hover css pseudo class.
Below I positioned some boxes with css flex and hide/show the contents with css. You might want to position them in a css grid or some other way (like absolutely positioned in front of an image).
.container {
display: flex;
flex-wrap: wrap;
width: 30em;
}
.area {
cursor: pointer;
width: 15em;
height: 15em;
border: 2px solid black;
box-sizing: border-box;
}
.area > span {
opacity: 0;
}
.area:hover > span {
opacity: 1;
}
#area-red {
background-color: red;
}
#area-green {
background-color: green;
}
#area-blue {
background-color: blue;
}
#area-yellow {
background-color: yellow;
}
<div class="container">
<div id="area-red" class="area">
<span>Red contents</span>
</div>
<div id="area-green" class="area">
<span>Green contents</span>
</div>
<div id="area-blue" class="area">
<span>Blue contents</span>
</div>
<div id="area-yellow" class="area">
<span>Yellow contents</span>
</div>
</div>
You need to associate the image with the image map, so
<img usemap="#image_map" src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg" >
Then set the position of the thing you want to move to be absolute:
<div class="card" style="width:40%; height: 10%; position:absolute;">
Then access the mouse pointer position in the event handler:
$('area').hover(function(e)
{
const card = document.querySelector('.card');
card.style.top = e.clientY+'px';
card.style.left = e.clientX+'px';
});
$('area').mouseenter(function(e)
{
const card = document.querySelector('.card');
$(card).show();
card.style.top = e.clientY+'px';
card.style.left = e.clientX+'px';
});
$('area').mouseleave(function(e)
{
const card = document.querySelector('.card');
$(card).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="interactive-map" >
<img src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg" usemap="#image_map">
<div class="card" style="width:40%; height: 10%; position:absolute;">
<div class="card-body">
This is some text within a card body.
</div>
</div>
<map name="image_map">
<area id="one" title="Red" coords="25,33,68,65" shape="rect" data-placement="25,33,68,65">
<area title="Green" coords="132,30,194,67" shape="rect">
<area title="Blue" coords="22,147,74,192" shape="rect">
<area title="Yellow" coords="131,144,197,188" shape="rect">
</map>
</div>
$(function() {
$('area').mouseenter(function() {
let coords = this.coords.split(',').map(a => a.trim())
$('.card').css({display: 'block', top: coords[1] + 'px', left: coords[0] + 'px', width: coords[2] - coords[0], height: coords[3] - coords[1]})
});
$('area').mouseleave(function() {
$('.card').css({display: 'none'})
});
});
.interactive-map {
position: relative;
}
.card {
display: none;
position: absolute;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="interactive-map" >
<img usemap="#image_map" src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
<map name="image_map">
<area title="Red" coords="0,0,150,150" shape="rect">
<area title="Green" coords="150,0,300,150" shape="rect">
<area title="Blue" coords="0,150,150,300" shape="rect">
<area title="Yellow" coords="150,150,300,300" shape="rect">
</map>
</div>
This code will place the overlay nicely in one position and will avoid flicker by using "pointer-events: none" in the css. It also auto-calculate the position and size of the overlay based on the area tags.
(Note: I have altered the area coordinates based upon your requirement that each color be considered its own box)
As you are specifying coords attribute to your area, you can specify cards left and top property
let pos = e.target.coords.split(",");
card.style.top = pos[1] + 'px';
card.style.left = pos[0] + 'px';
card.style.display = "block";
Initially set it's style to display none, then on some event calculate its actual position and set its left and top. Add padding left and top to show text exactly in center.
$('area').on("click", function(e) {
let pos = e.target.coords.split(",");
const card = document.querySelector('.card');
card.style.top = pos[1] + 'px';
card.style.left = pos[0] + 'px';
card.style.display = "block";
});
.card {
position: absolute;
}
area {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="interactive-map">
<img src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg" usemap="#image_map">
<div class="card" style="width:40%; height: 10%; display: none;">
<div class="card-body" style="width: 20%;">
This is some text within a card body.
</div>
</div>
<map name="image_map">
<area id="one" title="Red" coords="25,33,68,65" shape="rect" data-placement="25,33,68,65">
<area title="Green" coords="132,30,194,67" shape="rect">
<area title="Blue" coords="22,147,74,192" shape="rect">
<area title="Yellow" coords="131,144,197,188" shape="rect">
</map>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
Related
I have simple JS code that on "text-title" element click checks if another element exists and if it does it add class to third element. Problem is that function works properly only in user clicks twice on "text-title" element. I also tried to console.log "(.fpd-layouts-panel .fpd-item).length" element and I get correct value only on second click.
What am I doing wrong?
Here is my JS code:
jQuery('.text-title').click( function() {
if (jQuery('.fpd-layouts-panel .fpd-item').length) {
jQuery('.ux-swatch[data-value="caseotic"]').removeClass('hidden');
} else {
jQuery('.ux-swatch[data-value="caseotic"]').addClass('hidden');
};
});
And HTML code:
<div class="fpd-item fpd-tooltip text-title tooltipstered selected" data-title="iPhone 12" data-source="http://localhost:8888/wp-testi/wp-content/uploads/2021/10/iphone-13.jpg">iPhone 12 </div>
<div class="ux-swatch tooltip ux-swatch--image tooltipstered" data-value="caseotic" data-name="CASEOTIC"><img width="100" height="100" src="http://localhost:8888/wp-testi/wp-content/uploads/2022/01/CASEOTIC-IPHONE-13-100x100.jpg" class="ux-swatch__img attachment-woocommerce_gallery_thumbnail size-woocommerce_gallery_thumbnail" alt="CASEOTIC" loading="lazy" srcset="http://localhost:8888/wp-testi/wp-content/uploads/2022/01/CASEOTIC-IPHONE-13-100x100.jpg 100w, http://localhost:8888/wp-testi/wp-content/uploads/2022/01/CASEOTIC-IPHONE-13-510x510.jpg 510w, http://localhost:8888/wp-testi/wp-content/uploads/2022/01/CASEOTIC-IPHONE-13.jpg 650w" sizes="(max-width: 100px) 100vw, 100px"><span class="ux-swatch__text">CASEOTIC</span></div>
<div class="fpd-layouts-panel">
<div class="fpd-scroll-area mCustomScrollbar _mCS_6 mCS-autoHide mCS_no_scrollbar" style="position: relative; overflow: visible;"><div id="mCSB_6" class="mCustomScrollBox mCS-light mCSB_vertical mCSB_outside" tabindex="0" style="max-height: none;"><div id="mCSB_6_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr">
<div class="fpd-grid"><div class="fpd-item fpd-tooltip tooltipstered"><picture style="background-image: url(http://localhost:8888/wp-testi/wp-content/uploads/2022/01/CASEOTIC-IPHONE-13.jpg" );"=""></picture></div></div>
</div></div><div id="mCSB_6_scrollbar_vertical" class="mCSB_scrollTools mCSB_6_scrollbar mCS-light mCSB_scrollTools_vertical mCSB_scrollTools_onDrag_expand" style="display: none;"><div class="mCSB_draggerContainer"><div id="mCSB_6_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; height: 0px; top: 0px;"><div class="mCSB_dragger_bar" style="line-height: 30px;"></div><div class="mCSB_draggerRail"></div></div></div></div></div>
</div>
And in advance thank you all for helping.
I'm trying to make a website where you can upload an image, then select another one and add it over the uploaded one. I'm using jquery to make the image draggable and resizable and everything works fine, except that I can't add it over the uploaded image.
Here's my code:
code:
$(document).ready(function() {
$(document).on('click', '.block-add', function() {
var a = $(this);
var src = a.find('img:first').attr('src');
var elem = $('<div class="container"><img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.find('.blocks:first').resizable();
return false;
});
});
.blocks {
width: 10%;
z-index: 9999;
}
.block {
width: 100%;
height: 100%;
border: 1px solid #C8C8C8;
margin: 0px;
background-color: #F0F0F0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload">
<input type='file' onchange="readURL(this);" /> <br>
</div>
<br/>
<div class="block">
<div class="background">
<img id="bg" src="" alt="" width="50%" ; height="50%" ; class="center" />
</div>
</div>
<br/>
<div id="existingImges">
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
</div>
So here's the result in this case:
and here's what I'd like to be after adding a wheel:
As #Troy Bailey and I mentioned, the way to success is the css attribute z-index.
Here the changes:
First step:
Add this above z-index attribute to class .block: z-index: 1;.
Second step:
For your javascript you have to add some lines which increases the z-index attribute s of your created divs, with class .container.
$(document).ready(function() {
$(document).on('click', '.block-add', function() {
var src = $(this).find('img:first').attr('src');
//New line
//First, find out how many images has being added and dragged
var foundAddedDivs = $('.block').find('.container').size();
//New line
//Second, get the current value from recently added 'z-index' from fist step.
var backGroundDivIndex = $('.block').css("z-index");
//New line
//Third: Calulate a new value for 'z-index' for each draggable elements
var zIndex = backGroundDivIndex + foundAddedDivs;
//Modified line
//Forth: Creates a new div and add calculated z-index to draggable element
var elem = $('<div class="container" style="z-index: '+ zIndex +'">
<img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.find('.blocks:first').resizable();
return false;
});
});
.block-add {z-index: 99;}
/* just increase the z-index of the wheel so it can be in front of the car image */
Im trying to make a product page with gallery (clickable small thumbnails on the side) which opens a large image on the right side.
Jquery zoom only displays the zoom on the first image, when the other images are displayed the zoom is still on the first image.
Here is my code:
HTML
<section class="product-page">
<div class="thumbnails">
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-right-side.png" alt="thumb-air-force-right-side" onclick="right()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-left-side.png" alt="thumb-air-force-left-side" onclick="left()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-bottom-side.png" alt="thumb-air-force-bottom-side" onclick="bottom()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-side.png" alt="thumb-air-force-pair-side" onclick="pairSide()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-top.png" alt="thumb-air-force-pair-top" onclick="pairTop()"></div>
</div>
<div class="img-display">
<span class='zoom' id='shoe1'>
<img id="img-area" src="img/nike/shoes/Air-force1/air-force-right-side.png" alt="air-force-right-side" width="320" height="320">
</span>
<span class='zoom1' id='shoe1'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-left-side.png" alt="air-force-left-side" width="320" height="320">
</span>
<span class='zoom' id='shoe3'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-bottom-side.png" alt="air-force-bottom-side">
</span>
<span class='zoom' id='shoe4'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-side.png" alt="air-force-pair-side">
</span>
<span class='zoom' id='shoe5'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-top.png" alt="air-force-pair-top">
</span>
</div>
</section>
JS for image changing while clicking on the thumbnail images
var img = document.getElementById("img-area");
function right(){
img.src='img/nike/shoes/Air-force1/air-force-right-side.png';
}
function left(){
img.src='img/nike/shoes/Air-force1/air-force-left-side.png';
}
function bottom(){
img.src='img/nike/shoes/Air-force1/air-force-bottom-side.png';
}
function pairSide(){
img.src='img/nike/shoes/Air-force1/air-force-pair-side.png';
}
function pairTop(){
img.src='img/nike/shoes/Air-force1/air-force-pair-top.png';
}
And the Jquery code
$(document).ready(function(){
$('#shoe1').zoom();
$('#shoe2').zoom();
$('#shoe3').zoom();
$('#shoe4').zoom();
$('#shoe5').zoom();
});
How to make the changed image zoom in on hover?
Thanks in advance.
Something as simple as this could be achievable without causing repetitive strain injury.
For obvious reasons I haven't considered image preloading, etc, but this is something I hope you can take inspiration from.
Your img-display should be treated as a canvas. Bind a single event handler to links wrapped around thumbs who's href attribute contains the larger image you want to load in the canvas area. This event handler simply rotates your thumbnails, but uses the larger image and passes that to both the canvas image and the jQuery zoom plugin API whilst toggling active states of thumbs (as an aesthetic suggestion).
Why href? As an example, screen readers still need to be able to follow these links. I'm thinking accessibility ftw.
Images courtesy of JD Sports.
$(function() {
$('.zoom').zoom();
$('.thumb').on('click', 'a', function(e) {
e.preventDefault();
var thumb = $(e.delegateTarget);
if (!thumb.hasClass('active')) {
thumb.addClass('active').siblings().removeClass('active');
$('.zoom')
.zoom({
url: this.href
})
.find('img').attr('src', this.href);
}
});
});
img {
display: block;
height: auto;
max-width: 100%;
}
.product-page {
display: flex;
}
.img-display {
flex-grow: 1;
max-width: 372px;
}
.thumb {
opacity: .7;
margin: 0 .25rem .25rem 0;
width: 120px;
transition: opacity .25s ease-out;
}
.thumb:hover,
.thumb.active {
opacity: 1;
}
.zoom {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<section class="product-page">
<div class="thumbnails">
<div class="thumb active">
<a href="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="thumb-air-force-right-side">
</a>
</div>
<div class="thumb">
<a href="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-left-side">
</a>
</div>
<div class="thumb">
<a href="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-bottom-side">
</a>
</div>
</div>
<div class="img-display">
<span class="zoom">
<img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="">
</span>
</div>
</section>
#perocvrc
Please try below code it works perfectly as per your requirement.
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
height: auto;
max-width: 100%;
}
.main-view-page {
display: flex;
}
.full-screen-img {
flex-grow: 1;
max-width: 500px;
}
.sideimg {
opacity: .7;
margin: 0 .1rem .1rem 0;
width: 120px;
transition: opacity .25s ease-out;
}
.sideimg:hover,
.sideimg.active {
opacity: 1;
width:135px;
}
.zoom-in {
display: inline-block;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<script>
$(function() {
$('.zoom-in').zoom();
$('.sideimg').on('click', 'a', function(e) {
e.preventDefault();
var thumb = $(e.delegateTarget);
if (!thumb.hasClass('active')) {
thumb.addClass('active').siblings().removeClass('active');
$('.zoom-in')
.zoom({
url: this.href
})
.find('img').attr('src', this.href);
}
});
});
</script>
</head>
<body>
<section class="main-view-page">
<div class="thumbnails">
<div class="sideimg">
<a href="https://st2.depositphotos.com/2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg">
<img src="https://st2.depositphotos.com/2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg" alt="thumb-air-force-right-side">
</a>
</div>
<div class="sideimg active">
<a href="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg">
<img src="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg" alt="thumb-air-force-left-side">
</a>
</div>
<div class="sideimg">
<a href="https://jooinn.com/images/cabin-with-beautiful-view.jpg">
<img src="https://jooinn.com/images/cabin-with-beautiful-view.jpg" alt="thumb-air-force-bottom-side">
</a>
</div>
<div class="sideimg">
<a href="https://www.principlesinsight.co.uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg">
<img src="https://www.principlesinsight.co.uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg" alt="thumb-air-force-bottom-side">
</a>
</div>
</div>
<div class="full-screen-img">
<span class="zoom-in">
<img src="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg" alt="main-view-images">
</span>
</div>
</section>
</body>
</html>
I hope above code will be useful for you.
Thank you.
How can i create multiple tooltips for multiples class?
https://jsfiddle.net/6v1fbrk9/
<img src="http://animekompi.web.id/wp-content/uploads/2015/01/68839-128x200.jpg"/>
<span id="tooltip-span">
<img class="hidden" src="https://2.bp.blogspot.com/-RPZhwHLprkw/WOtXJpHaQ6I/AAAAAAAAE-M/SXjdESQrlZ4FQzWWwrfoSJ9-UWJ4jxxlQCLcB/s1600/q.png" />
</span>
You will need to select each of your "tooltip-able" links, loop over them and bind mouseover event to every tooltip content. Also don't use duplicated ids, use classes. I fixed HTML and CSS a little (add z-index).
Something like this will work:
var tooltips = [].slice.call(document.querySelectorAll('.tooltip'))
tooltips.forEach(function(tooltip) {
var tooltipSpan = tooltip.querySelector('.tooltip-content');
tooltip.onmousemove = function(e) {
var x = e.clientX,
y = e.clientY;
tooltipSpan.style.top = (y + 20) + 'px';
tooltipSpan.style.left = (x + 20) + 'px';
}
})
.tooltip {
text-decoration: none;
position: relative;
}
a.tooltip .tooltip-content {
display: none;
z-index: 1000;
}
a.tooltip:hover .tooltip-content {
display: block;
position: fixed;
overflow: hidden;
}
img.hidden {
display: block;
}
<a class="tooltip" href="http://www.google.com/">
<img src="http://animekompi.web.id/wp-content/uploads/2015/01/68839-128x200.jpg" />
<span class="tooltip-content">
<img class="hidden" src="https://2.bp.blogspot.com/-RPZhwHLprkw/WOtXJpHaQ6I/AAAAAAAAE-M/SXjdESQrlZ4FQzWWwrfoSJ9-UWJ4jxxlQCLcB/s1600/q.png" />
</span>
</a>
<a class="tooltip" href="http://www.google.com/">
<img src="http://animekompi.web.id/wp-content/uploads/2015/01/68839-128x200.jpg" />
<span class="tooltip-content">
<img class="hidden" src="https://2.bp.blogspot.com/-RPZhwHLprkw/WOtXJpHaQ6I/AAAAAAAAE-M/SXjdESQrlZ4FQzWWwrfoSJ9-UWJ4jxxlQCLcB/s1600/q.png" />
</span>
</a>
Question is unclear.
Are you trying to put multiple tooltips for a single image?
If that's the case,You could use image-map or put divs with background: transparent at the locations you want the tooltips, and then using the tooltips on it.
Some help from W3 with map
Hope this works for you.
I want to change the color of a piece from image when onmouseover but not received:
My code:
<img src="demo_usa.png" width="960" height="593" alt="Planets" usemap="#planetmap">
<map name="planetmap" id="map">
<area id="myMap" shape="rect" coords="0,0,120,126" alt="Sun" href="#"
onMouseOver="colorSwitch(this.id, '#ff9999');" />
</map>
<script type="text/javascript">
function colorSwitch(id, color) {
element = document.getElementById(id);
element.style.background = color;
}
</script>
What am I doing wrong?
Try this code..
HTML:
<area shape="rect" coords="0,0,120,126" alt="Sun" href="#"
onMouseOver="colorSwitch('map', '#ff9999');" />
Javascript:
<script type="text/javascript">
function colorSwitch(id, color)
{
element = document.getElementById( id );
element.style.background = color;
}
</script>
Note that this.id will send the id of the element <area ..> that is null in the code.. You need to send the string as the id of the map element
Areas cannot have background colours; try this:
<div id="planetmap">
<img id="backgroundimage" src="demo_usa.png" width="960" height="593" alt="Planets"/>
<div id="planet.1" class="planetmarker" style="left:0px;top:0px;width:120px;height:126px;">
</div>
</div>
<style type="text/css">
.planetmarker {
position: absolute;
z-index:1;
}
.planetmarker:hover {
background-color: #ff9999;
}
</style>
You can alternatively also use JavaScript:
<script type="text/javascript">
function setOpacity(id, level) {
element = document.getElementById(id);
element.style.opacity = level;
}
</script>
<style type="text/css">
.planetmarker {
position: absolute;
z-index:1;
background-color: #ff9999;
opacity: 0;
}
</style>
<div id="planetmap">
<img id="backgroundimage" src="demo_usa.png" width="960" height="593" alt="Planets"/>
<div id="planet.1" class="planetmarker" style="left:0px;top:0px;width:120px;height:126px;" onMouseOver="setOpacity(this.id, 1);" onMouseLeave="setOpacity(this.id, 0);">
</div>
</div>