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.
Related
This question already has answers here:
Difference between object.src and object.getAttribute('src')
(3 answers)
Closed 2 years ago.
I'm having a very confusing time with this very simple onClick function in Javascript/html. I know there are many questions on this but couldn't quite find an answer given what my script does (Or doesn't in this case). It should be simple but for some reason the logic is just not working as I expect it too.
<h1>The onclick Event</h1>
<img id="onoff" onclick="changeImage();" src="images/Off Button.jpg" width="245" height="238">
<p>Click on button to turn "on"</p>
<script>
function changeImage() {
var image = document.getElementById("onoff");
if (image.src.match("Off Button.jpg")){
image.src = "images/On Button.jpg";
}
else{
image.src="images/Off Button.jpg";
}
}
</script>
So as you can see this should take the original "off button" image and swap it to "on button" when it is clicked provided it is showing the "Off Button.jpg".
However, it does nothing, using the Chrome developer tools I can see the script doesn't even fire. But when I make these changes:
if (image.src.match("Off Button.jpg")){
image.src = "images/Off Button.jpg";
}
else{
image.src="images/On Button.jpg";
It now fires and changes the Button to "On Button" but does not fire again to change it back. For me, this makes no sense logically but I might just be missing something really obvious. I know this is pretty basic but any help or explanation would be appreciated.
I did some changes to the code and now it's working.
I used the relative path with ./ to img src and mostly you should avoid use spaces to name images or anything else - spaces always cause problems ;)
<h1>The onclick Event</h1>
<!-- relative path and no space in name on src -->
<img
id="onoff"
onclick="changeImage();"
src="./images/off-button.jpg"
width="245"
height="238"
/>
<p>Click on button to turn "on"</p>
<script>
function changeImage() {
var image = document.getElementById('onoff');
if (image.src.match('off-button.jpg')) { /* no space in name */
image.src = './images/on-button.jpg'; /* relative path and no space
in name */
} else {
image.src = './images/off-button.jpg'; /* relative path and no space
in name */
}
}
</script>
Note - Remember to rename the images inside the images folder as well
I use a carousel jQuery plugin which defines a container which must contain <img> tags. The images are loaded and shown, the carousel works.
I am now implementing image preview on hover. I've created a separate <div> for this purpose which is being shown with the loaded image.
The problem is that I'm programatically creating a new <img> tag within the <div> each time the mouse hovers over a different image. This results in massive amount of unnecessary server requests.
How can I use preloaded images from the carousel within the image preview div?
I don't need a fully working solution, I'll accept abstract answers.
Further to the comments, here's a working sample of the cloneNode method I mentioned. I've not bothered with the mechanics of the containers or of triggering the behaviour via a mouse hover, just click the existing image and it will work.
You'll also have to change the image source to something you already have. I'm testing with the full-res version of this image: https://commons.wikimedia.org/wiki/File:SoundingRocketSamplePayload-02.jpg
<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function byId(id,parent){return (parent == undefined ? document : parent).getElementById(id);}
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
byId('srcImg').addEventListener('click', myTest, false);
}
function myTest()
{
var tgtElem = byId('srcImg');
var clone1 = tgtElem.cloneNode(true);
var clone2 = tgtElem.cloneNode(true);
var clone3 = tgtElem.cloneNode(true);
document.body.appendChild(clone1);
document.body.appendChild(clone2);
document.body.appendChild(clone3);
}
</script>
<style>
</style>
</head>
<body>
<img id='srcImg' style='width: 256px' src='rockets.jpg'/>
</body>
</html>
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
I have some links at the bottom of my webpage:
http://puu.sh/aQHbz/911cfd78b8.png
I want each one of the floor links to display the corresponding floor on a separate page:
http://puu.sh/aQHpR/dd5625150e.jpg
Basically, I want each link to preload the picture so that when you click on the floor 2 link for example, the 2nd floor map is already loaded on the next screen.
I don't know if I can do this only using JavaScript and HTML. Any help is appreciated. Thank you. Here is my code:
JavaScript:
function showstuff(boxid){
document.getElementById(boxid).style.display='';
}
function hidestuff(boxid){
document.getElementById(boxid).style.display='none';
}
function pic(DivID,ImageName)
{
document.getElementById(DivID).innerHTML="<img src=/studentcenter/images /"+ImageName+">";
}
You can show the images in new window. Then If the window already opened you can access it and change its href.
Here is the html part
<img src="http://puu.sh/aQHbz/911cfd78b8.png" onclick = "newImage(this.src)"/>
<img src="http://puu.sh/aQHpR/dd5625150e.jpg" onclick = "newImage(this.src)"/>
Here is the javascript part.
var win = false; //window exist variable
function newImage(e){
if(win.open){
win.focus() //Focus to map window
win.location.href=e; //Change to new image
}else{
win = open(e, 'example', 'width=300,height=300'); //Open a new window with the image url
}
}
You can see the solution on fiddle.
You must put javascript part to head or before your images.
I have fancybox opening when I click on the "main image" area in my gallery, and no matter what image is open fancybox always starts at the first image in the gallery. For example when a user clicks on the 4th image thumbnail, it loads into the "main image" area correctly, but when clicking on the main image fancybox starts from the beginning.
I understand why it's doing this, because the main image area is wrapped in:
<a rel="gallery" class="fancybox" href="#hover0"> <img/> </a>
But what I would like to happen is to have the href '#hover0' change to #hover2, #hover3, #hover4 etc when the corresponding image is loaded in the main area. Not sure how to go about doing this.
Test Page: http://www.pixlsnap.com/j/testb.php
Alright, so I have tested this by saving your whole page (along with all the resources linked to your live site, so glad the images had a direct path), you could do the following, but before I go to that there is a script error that you need to correct:
$(function(){
// Bind a click event to a Cloud Zoom instance.
$('#1').bind('click',function(){
^ You have not closed this function correctly, it needs an extra }); at the end.
Now there are 2 things you need to do for your problem:
1) Paste the following code above the function I mentioned previously (the order matters so it needs to be above it):
$(document).ready(function(){
$('#imgconstrain img').on('click',function(){
$new_hoverid = $('img.cloudzoom-gallery-active').attr('id');
$('#1').closest('a').attr('href','#'+$new_hoverid);
});
});
To explain what this code is doing, when the big image is clicked, we are going to get the active image, in case you haven't noticed, when you click on a thumbnail it gets the class cloudzoom-gallery-active. So, on click of the bigger image, we are going to retrieve the id of the thumbnail with the cloudzoom-gallery-active class.
Now, since we are getting the id attribute, each image should have a unique id. So here we go for the second part:
2) Give your thumbnails image a unique id like:
<li><img class = 'cloudzoom-gallery' id="hover1" src ="http://brecksargent.com/slideshowpro/p.php?a=eXt1NExlZT1uemwuIjItOjI6Hys4OzouNio%2BNC4iKyAiPjQjJjs%2FNCY%2BLiY0&m=1383849642" alt ="LIG Hippie Commune" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg' "> </li>
<!-- ^ here -->
<li><img class = 'cloudzoom-gallery' id="hover2" src ="http://brecksargent.com/slideshowpro/p.php?a=cX12XnxkJXl0bSczJSgwOzIDOjY5OyYzKzE8LTI%2BMiU%2BJzE%2FOicjKD8nNyM%3D&m=1383853420" alt ="Dunno weird though" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg' "> </li>
<!-- ^ here -->
...till hover6 and that's it.
Let me know if that works for you and feel free to ask if the explanation wasn't clear enough ^-^
Edits:
So as per the comments, here's a few things to be done:
1) In your this anchor tag:
<div id="imgconstrain">
<a rel="gallery" class="fancybox" href="#hover0">
<img class = "cloudzoom" id="1" src =
Take out rel="gallery" (this is the reason fancybox is showing from start on click of next) and remove fancybox class and instead add open-fancybox (the reason for this is coming later)
2) All these lines:
<script type="text/javascript">
function displayCaption() {
var caption = document.getElementById('caption');
caption.innerHTML = this.alt;
}
document.getElementById('1').onclick = displayCaption;
document.getElementById('2').onclick = displayCaption;
//....
</script>
is not needed, we will do this in a smaller way
3) Like I mentioned previously, please add the ids here:
<li><img class = 'cloudzoom-gallery' id="hover1" src ="http://brecksargent.com/slideshowpro/p.php?a=eXt1NExlZT1uemwuIjItOjI6Hys4OzouNio%2BNC4iKyAiPjQjJjs%2FNCY%2BLiY0&m=1383849642" alt ="LIG Hippie Commune" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg' "> </li>
<!-- ^ here -->
<li><img class = 'cloudzoom-gallery' id="hover2" src ="http://brecksargent.com/slideshowpro/p.php?a=cX12XnxkJXl0bSczJSgwOzIDOjY5OyYzKzE8LTI%2BMiU%2BJzE%2FOicjKD8nNyM%3D&m=1383853420" alt ="Dunno weird though" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg' "> </li>
<!-- ^ here -->
and so on till the last image.
4) Now the final piece:
$('ul#carousel.elastislide-list img').on('click',function(){
//here we get the updated id (hover1, hover2 etc.)
//and pass it to the cloud-zoomed anchor tag
$new_hoverid = $('img.cloudzoom-gallery-active').attr('id');
$('#imgconstrain a').attr('href','#'+$new_hoverid);
//get the caption of the thumbnail image and set it to the
//p tag with id caption
caption_text = $(this).attr('alt');
var caption_element = document.getElementById('caption');
caption_element.innerHTML = caption_text;
});
//what this code does is, when the cloud-zoomed image is clicked,
//we get the updated href (which is what the above code does)
//and we are going to make that href get clicked so that the fancybox opens
$('#imgconstrain a.open-fancybox').on('click',function(){
$to_open = $(this).attr('href');
$('a.fancybox[href="'+$to_open+'"]').click();
});
});
You can take out this code which was in my previous answer as I have already placed it in the new one:
$(document).ready(function(){
$('#imgconstrain img').on('click',function(){
$new_hoverid = $('img.cloudzoom-gallery-active').attr('id');
$('#1').closest('a').attr('href','#'+$new_hoverid);
});
Full code pastebin
Let me know if it works for you :)