Using an image map, I am trying to build a graphic that when you click on a "wing" it makes it look like a button and depresses it.
Image map is built, onclick is working, but nothing happens?
This is the code:
<!DOCTYPE html>
<html>
<head></head>
<body>
<map name="location-map" style="cursor:pointer;">
<area id="spot_1" onClick="set_spot(this.id)" shape="poly" coords="66,78,122,38,194,15,186,106,174,112,160,118" />
</map>
<img src="PH.png" usemap="#location-map" id="spot_1" style="position:absolute;top:0px;left:0px;width:402px;height:302px;" />
<script type="text/javascript">
function set_spot(mouse_over_name) {
document.getElementById(mouse_over_name).style.display="none";
};
</script>
</body>
</html>
It is supposed to hide the image?
I have seen other solutions saying that the position of the JavaScript needs to be after the element. I have tried the script in every location and the out come is always the same. No change. I've also tried changing the width to 0 px and changing the image src to ""! I also had the images inside DIV's and tried hiding the DIV but again, nothing?
If I put an an alert:
alert(document.getElementById(mouse_over_name).style.display) before the change, I get a blank alert box, after I get "none."
What am I missing?
You can see the above code live here:
http://www.beaconfasteners.net/beacon_advantage/graph/test.html
Edit:
I have tried this in all major browsers.
Robby Cornelissen was correct. The reason that your img is not hiding is because the onclick uses the id of the area element and you're setting display: none on that, not the img element. I'm not sure if there is a way to hide the contents of an area element, but you could potentially use this to find and hide the image element that shares the same id as the area that is clicked:
function set_spot(mouse_over_name) {
[].forEach.call(document.querySelectorAll('img'), function(el) {
if (el.id === mouse_over_name) {
el.style.display = 'none';
};
});
};
This will iterate through all of the images on the page, so I can't make any guarantees about the speed of such a solution. You can preview it here:
jsfiddle
Related
I currently have an image with a hover effect that looks like this:
<img src="jb-400x500.jpg" alt="yada" width="400" height="500" onmouseover="this.src='jb-400x500-2.jpg';" onmouseout="this.src='jb-400x500.jpg';" />
This works fine, except I would like for only the second image (jb-400x500-2.jpg) to be displayed for mobile viewers. I tried using srcset to achieve this, but doing so gets rid of the mouseover effect for desktop viewers. Is there any way to make the two work together?
Thanks.
If you include a srcset on a browser that supports it, the src attribute will be ignored. So your script will need to change the srcset as well as, or instead of, the src attribute. E.g.
<img src="jb-400x500.jpg" alt="yada" width="400" height="500"
srcset="jb-400x500-2.jpg 720w,jb-400x500.jpg 1x"
onmouseover="this.setAttribute('srcset','jb-400x500-2.jpg 720w,jb-400x500-2.jpg 1x');"
onmouseout="this.setAttribute('srcset','jb-400x500-2.jpg 720w,jb-400x500.jpg 1x');" />
You may need to add some JavaScript via the <script> tag at the bottom of your HTML document.
For starters, you have to add an id attribute to your image so we can select it.
<img src="jb-400x500.jpg" id="image-1" alt="yada" width="400" height="500" />
Secondly, we'll use Javascript to detect if you're using a touch device, and apply the necessary behaviors to your image element:
<script>
// Detect if browser enables touch events
var isTouchDevice = "ontouchstart" in document.documentElement;
// Select your image
var image1 = document.getElementById("image-1");
if(isTouchDevice){ // If it's touch, change the image src
image1.src = "jb-400x500-2.jpg";
}else{ // If it's not touch, assign mouseover and mouseout events
image1.addEventListener("mouseover", function( event ) {
image1.src = "jb-400x500-2.jpg";
});
image1.addEventListener("mouseout", function( event ) {
image1.src = "jb-400x500.jpg";
});
}
</script>
Remember to add your <script> at the bottom of your document, right before you close </body>.
You need to use css and #media-query to achieve this effect
Basically I can tell that you need to add two images with different hover effects – one for desktop and one for mobile
And hide one of them depending on screen resolution with css.
I'm working with Isotope and I have a lot of images in it.
The problem is that when visiting my one page website from a smartphone it takes quite a bit to load the page as isotope load all the images thumbnails as soon as isotope itself loads.
So, basically I want to hide/not load all the images that mustn't be shown if it's category isn't clicked and what I did was use two workarounds:
set the figure to display:none so that it doesn't show the void where it was supposed to be and the other images can actually occupy that space
set the img src to about:blank so that it doesn't load until it's category is clicked
then when the link "Click me!"(category) is clicked the figure gets set to display:block and the img src gets replaced by the real image path.
style:
#showfigure{
display:none; !important
}
body:
Click me!
<figure id="showfigure" class="filter imgtoshow">
<img id="showimg" src="about:blank" alt="">
</figure>
script:
<script>
function showAll() {
document.getElementById("showfigure").style.display = 'block';
$("#showimg").attr("src","example.jpg");
};
</script>
Now, the only way I got it to work with multiple figures/images was giving each figure and image it's own id (showfigure1, showfigure2, showfigure3 etc... and showimg1, showimg2, showimg3, etc...) as using the same id only works for the first figure/img in the code.
Am I missing something?
I tried replacing the path of the img src like this:
http://jsfiddle.net/F6Gds/28/
But I can't get it to do the same with the onclick function from the link "Click me!", and anyways there's the same problem with the ids.
Thanks in advance for any help!
I have this peace of Javascript code. I have an photograph on which I want to perfom an imageflip on a mouseover.
Displaying it in the browser, the original image appears. When I go with the mouse over the defined area, the cursor changes to the hand, but the image does not flip. Thus, it recognizes the defined area (the with the coordinates created polygon), but it wont flip.
<html>
<head>
</head>
<body>
<img name="juego_paramo" src=paramo_plantas_original.gif usemap="#paramo">
<map name="paramo">
<area shape="poly" coords="0,161,4,161,4,162,12,162,12,163,19,163,26,165,34,166,45,168,52,170,62,174,73,177,82,180,91,184,103,188,112,192,122,196,133,202,142,207,152,212,162,216,172,221,180,224,186,227,193,230,197,233,0,233,0,161"
href="#" alt="helecho", onMouseOver="resaltarHelecho", onMouseOut="originalJuego">
<area shape="default" nohref>
</map>
<script>
//preload the images
original = new Image(698,233)
originale.src = "paramo_plantas_original.gif"
helechoResaltado = new Image(698,233)
helecho.src ="paramo_plantas_con_mouse_blanco.gif"
//JS function to enlarge the image
function resaltarHelecho() {
document.juego_paramo.src=helechoResaltado;
return true;
}
function originalJuego () {
document.juego_paramo.src=original;
return true;
}
</script>
</body>
</html>
I cannot find the mistake.
Any hints where do look for it?
There are some mistakes in your HTML as well as in your javascript:
original = new Image(698,233)
originale.src = "paramo_plantas_original.gif"
The name of the new Image should be the same, e.g.
originale = new Image(698,233)
originale.src = "paramo_plantas_original.gif"
Using pure javascript, changing the source of the image in your functions wouldn't work like you did, e.g. here:
document.juego_paramo.src=original;
This should be
document.getElementById('juego_paramo').src = originale.src;
(provided the original image has an id="juego_paramo" which I just added for convenience).
Your <area> ends with the attributes alt="helecho", onMouseOver="resaltarHelecho", onMouseOut="originalJuego" - this should be alt="helecho" onMouseOver="resaltarHelecho()" onMouseOut="originalJuego()" - no "," between the attributes, and adjusted the call for the functions for the mouse-events.
The console.log message is deleted in the updated Fiddle - it was just to make sure the function was called before I added the dummy images.
I have been working on the side bar where it says Click On Game Lists Below on http://www.bespoke-arcades.co.uk/store/arcade-machines/16-synergy-elite-arcade-machine.html on the left hand side.
I have an image map because I would rather have one image downloaded than a ton (as it slows down loading times).
But the image map won't allow me to use class="iframe" in the <area> tag. If I do <img src="yyy" /> it will work and open up a fancybox iframe popup, but if I use the imagemap the class="iframe" function isn't really accepted.
Is there any work around to making this work? I have the fancybox js and css on the page in question. I also have the correct javascript to work if I use that class function.
Try changing this :
<script type="text/javascript">
$('a.iframe').fancybox();
</script>
by this :
<script type="text/javascript">
jQuery(document).ready(function($){
$('area.iframe').fancybox({
"type":"iframe",
"width": 600, // or whatever
"height": 380
});
});
</script>
... of course, don't forget to add class="iframe" to each area tag.
Also check this answer or this for further reference.
My question is I have a div and I want to make it invisible through a javascript function, easy as that, seems like something a lot of people would have done, and I've researched it pretty thoroughly, however it doesn't seem to work. Here is my code (greatly simplified to just show the problem) Forgive the poor HTML formatting, I did that to keep the website from thinking I was trying to post a link.
function HideDiv()
{
var elem = Document.getElementById('divID');
elem.style.display = "none";
elem.style.visibility = "hidden";
}
function buttonFunction()
{
var elem = Document.getElementById('buttonID');
elem.src="a new url";
}
<div id="divID" style="background: url('a url') top center no-repeat " >
<center>
<anchor onclick="buttonFunction" (a hyper reference here)="#">
<img src="a url" vspace ="35" border = "0" id="buttonID">
</anchor>
</center>
</div>
Does having those anchors in the div prevent the hiding functionality? The reason I have both display and visibility on the div is that my understanding is that those functions work differently between firefox and IE, so I included both as a way to make sure that regardless of browser this will work. I have tried using either function individually in FF IE and Chrome to no result, the Div remains visible. Additionally, I'd like the anchors to become invisible as well if at all possible.
Thanks,
Tom
Document should be document.
I'm also not sure if having <anchor> instead of <a> was part of your attempt to "keep the website from thinking I was trying to post a link". (See David's answer below for how the entire <a> should be written.)
It may not be shown here, but I can't see where HideDiv() is called from.
<a onclick="buttonFunction(); return false;" href="#">
<img src="url" vspace ="35" border = "0" id="buttonID" />
</a>
jQuery makes this easy.
$("#divId").hide();
(haven't tried this, but I'm sure it's close to the correct syntax)