I have an imagemap of the Netherlands with an overlay effect on some of the areas. I can accomplish this effect in multiple ways:
1) Load every image. Set all but 1 image on 'display:none' and run JS (onMouseOver(str)) to display the image that one has the mouse on and hide all others.
css:
.verberg {
display: none;
}
JS:
var nederland = $('#Nederland');
var map1= $('#Friesland');
var map2= $('#Groningen');
var map3= $('#Drenthe');
var allmaps = $('.kaartje');
function mapOnMouseOver(str) {
var kaartnamen = ['Nederland', 'Friesland','Groningen', 'Drenthe']
var imgnamen = [nederland, map1, map2, map3]
var i = kaartnamen.indexOf(str);
if (i > -1) {
elementje = imgnamen[i];
allmaps.addClass('verberg');
elementje.removeClass('verberg');
}
}
2) Load one image and use JS (onMouseOver(str)) to change the source of the image.
JS:
function mapOnMouseOver(str) {
var kaartnamen = ['Nederland', 'Friesland','Groningen', 'Drenthe']
var urlsrc = ['nl.png','fr.png','gr.png','dr.png']
var i = kaartnamen.indexOf(str);
if (i > -1) {
newsrc = urlsrc[i];
$("#Nederland").attr("src","http://xxxxxxx/maps/"+ newsrc);
}
}
When I use the first method, everytime I load the page the image blinks when I hover an area for the first time. If I hover that area for a second time it doesn't until I reload the page again.
When I use the second method the image never blinks.
Can someone explain this different behaviour to me? I find it a bit counterintuitive. With the first method every image is already loaded, while with the second method the images are loaded when the mouse is on a specific area. It seems to me that the first method must be smoother, but it isn't...
Related
Please answer this question, as I am struggling a lot with it.
I am trying to change image source on mouse over. I am able to do it, but image is not displaying on page.
I am trying to change image source to cross domain URL. I can see that in DOM image source is changing but on page its not.
I have tried all solutions mentioned in LINK, but none of them is working.
Please let me solution to problem.
NOTE:
I can see in network tab image is taking some time to download (about 1 sec).
It is an intermediate issue, sometime image is loading and sometimes its not
CODE:
document.getElementsByTagName('img')[0].addEventListener('mouseover', function()
{
document.getElementsByTagName('img')[0].setAttribute('src', 'url/of/the/image');
});
have you tried loading images before everything else?
function initImages(){
var imC = 0;
var imN = 0;
for ( var i in Images ) imN++;
for(var i in Images){
var t=Images[i];
Images[i]=new Image();
Images[i].src=t;
Images[i].onload = function (){
imC++;
if(imC == imN){
console.log("Load Completed");
preloaded = 1;
}
}
}
}
and
var Images = {
one image: "path/to/1.png",
....
}
then
if( preloaded == 1 ){
start_your_page();
}
Here the code that will remove the img tag and replace it with a new one:
document.getElementsByTagName('img')[0].addEventListener('mouseover', function() {
var parent = document.getElementsByTagName('img')[0].parentElement;
parent.removeChild(document.getElementsByTagName('img')[0]);
var new_img = document.createElement("img");
new_img.src = "https://upload.wikimedia.org/wikipedia/commons/6/69/600x400_kastra.jpg";
parent.appendChild(new_img);
});
<img src="https://www.w3schools.com/w3images/fjords.jpg">
I resolved the issue using code:
function displayImage() {
let image = new image();
image.src="source/of/image/returned/from/service";
image.addEventListener('load', function () {
document.getElementsByTagName('img')[0].src = image.src;
},false);
}
Here in code, I am attaching load event to image, source of image will be changed after image is loaded.
how to make picture fly to the browser window and then fade out. I need that one picture fly into the browser window from left side,and then fade out. and then next picture. I have five picture. I need them do this one by one, over and over. Followed is my code: It is not work fine.
Method 1: Five pictures in five and with id as "#Slogan0", "#Slogan1", ...,etc. At the beginning, "left" is "-1000px", and the first one is "display" as "block", the others "none", so that I can change them to make them disappear."moveNext" is to change pictures.
var sloganidPre = "#Slogan";
var slogannum = 0;
sloganid = sloganidPre + slogannum;
window.onload = function(){
moveNext();
}
function moveNext(){
cf.moveTo("next");
if($(sloganid).css("display") == "block") {
slogannum = (slogannum+1)%5;
$(sloganid).css("display","none");
sloganid=sloganidPre+slogannum;
$(sloganid).css("display","block");
$(sloganid).animate({left:"30px"});
$(sloganid).css("opacity","0.2");
}
setTimeout(moveNext, 1500);
}
Method2:
Create new element to the parent node.
var sloganidPre = "Slogan";
var slogannum = 0;
var sloganid = "#"+sloganidPre + slogannum;
window.onload = function(){
$("#sloganparent").append("<div id=\""+sloganid+"\" style=\"width:744px;height:296px;position:absolute;left:-1000px;border:1px solid #0FF;overflow:hidden;display:block;\"\"><img src=\"img/"+sloganidPre+slogannum+".png\" /></div>");
$(sloganid).animate({left:'30px',opacity:'0.2'});
moveNext();
}
function moveNext(){
cf.moveTo("next");
$("#sloganparent:first-child").empty();
slogannum = (slogannum+1)%5;
sloganid= "#"+sloganidPre+slogannum;
$("#sloganparent").append("<div id=\""+sloganid+"\" style=\"width:744px;height:296px;position:absolute;left:-1000px;border:1px solid #0FF;overflow:hidden;\"><img src=\"img/"+sloganidPre+slogannum+".png\" /></div>");
var i=0;
for (i=-1000; i<30; i++) {
document.getElementById(new String(sloganid)).style.left= new String("\""+i+"px\"");
}
setTimeout(moveNext, 1500);
}
Jquery seems not to get the element which is created dynamically. Two methods are not work fine. Anyway I just want to know how to deploy the pictures as the titile said. Any method is fine. tks for ur consideration.
I have a continuous loop of alternating images that I would like to be able to interrupt and have display a new picture that corresponds with the current displayed picture using an onmouseover affect for as long as the mouse is on the image.
As an example to better describe my problem, I would like to have a bunch of images alternating on the screen every five seconds (which I can already do). Then when the mouseover event happens, have the images stop alternating and have a new image displayed that corresponds with the image that was just displayed (it will be another image that describes the image that was just being displayed). I also want the images to stop alternating while the mouse is over the images.
So far I can get the first image to display its corresponding image, but I can't seem to get the rest to work. Also I can't get the alternating images to stop while the mouse is still on the image.
Here's what I have so far:
<body>
<img src="image1.jpeg" alt="Image1" width="344" height="311" id="rotator" onmouseover="this.src='imageText1.jpeg'" onmouseout="this.src='image1.jpeg'">
<script type="text/javascript">
(function() {
var rotator = document.getElementById("rotator");
var imageDir = '';
var delayInSeconds = 5;
var images = ["image2.png", "image3.gif", "image4.png", "image5.jpeg","image6.gif", "image7.jpeg", "image1.jpeg"];
var num = 0;
if (rotator.onmouseover == )
var changeImage = function() {
var len = images.length;
rotator.src = imageDir + images[num++];
if (num == len) {
num = 0;
}
};
setInterval(changeImage, delayInSeconds * 1000);
})();
</script>
if (rotator.onmouseover == )
{
}
we must check something in if conditon.
empty condition is a problem.please check it.
As I hover a small img, I read it's larger image attribute, and create that image to display.
The problem is that I want to set Timeout before to display the image.
And while waiting for that timeout, we suppose to already have set an src to make it load early.
For some reason it never works in IE. ie, it only triggers the load even on the second time I hover the small image. I've no idea what has gone wrong with it, I had very similar animation on the other page it has been working just fine with a timeout.
Any ideas?..
$(document).ready(function(){
var nn_pp_trail=0;
$('div.nn_pp_in').hover(function(){
var limg=$(this).children('img').attr('limg');
var img=new Image();
//img.src=limg;
img.className='nn_pp_z';
img.src=limg;
var a=(function(img,par,limg){
return function(){
nn_pp_trail=window.setTimeout(showtrail,50);
$(img).one('load',(function(par){ //.attr('src',limg).
return function(){
// alert('loaded');
window.clearTimeout(nn_pp_trail);
hidetrail();
var width=this.width;
var height=this.height;
var coef=width/313;
var newHeight=height/coef;
var newHpeak=newHeight*1.7;
var nn=par.parents('.tata_psychopata').nextAll('.nn_wrap').first();
var pheight=nn.height();
var ptop=nn.position().top-2+pheight/2-1;
var pleft=nn.position().left+90+157-1;
$(this).appendTo(nn).css('left',pleft+'px').css('top',ptop+'px')
.animate({opacity:0.6},0)
.animate({opacity:1,top:'-='+newHpeak/2+'px',height:'+='+(newHpeak)+'px',left:'-=10px',width:'+=20px'},130,(function(newHeight,newHpeak){
return function(){
$(this).animate({left:'-='+(156-10)+'px',width:'+='+(313-20)+'px',height:newHeight+'px',top:'+='+(newHpeak-newHeight)/2+'px'},200,function(){});
}
})(newHeight,newHpeak)
);
}
})(par)
).each(function(){
if(this.complete || this.readyState == 4 || this.readyState == "complete" || (jQuery.browser.msie && parseInt(jQuery.browser.version) <=6))
$(this).trigger("load");}); ;
}
})(img,$(this),limg);
window.setTimeout(a,20); //if I set 0 - it loads all the time.
//if I set more than 0 timeout
//the load triggers only on the 2nd time I hover.
$(this).data('img',$(img));
},function(){
});
});
img.src=limg;
This was the problem, in IE we need not to set src as we create an image object, but first attach load event to it, and only then set attr src, and then trigger complete with an each, eg:
img.one(load, function(){}).attr('src','i.png').each(function(){ /*loaded? then it's complete*/ });
Hope someone learn on my mistakes :-)
Thank you, this helped me a lot. I had a similar situation.
As you said: First the "load"-event, then the "src" for IE.
// This was not working in IE (all other Browsers yes)
var image = new Image();
image.src = "/img/mypic.jpg";
$(image).load(function() {
//pic is loaded: now display it
});
// This was working well also in IE
var image = new Image();
imagSrc = "/img/mypic.jpg";
$(image).load(function() {
//pic is loaded: now resize and display
}).attr('src',imageSrc);
I'm trying to create a very simple gallery using javascript. There are thumbnails, and when they're clicked the big image's source gets updated. Everything works fine, except when I try it in IE the images' size stays the same as the inital image's size was. Let's say initial image is 200x200 and I click on a thumbnail of a 100x100 image, the image is displayed but it is streched to 200x200. I don't set any width or height values, so I guess the browser should use image's normal size, and so does for example FF.
here's some code:
function showBigImage(link)
{
var source = link.getAttribute("href");
var bigImage = document.getElementById("bigImage");
bigImage.setAttribute("src", source);
return false; /* prevent normal behaviour of <a> element when clicked */
}
and html looks like this:
<ul id="gallery">
<li>
<a href="images/gallery/1.jpg">
<img src="images/gallery/1thumb.jpg">
</a>
</li>
(more <li> elements ...)
</ul>
the big image is created dynamically:
function createBigImage()
{
var bigImage = document.createElement("img");
bigImage.setAttribute("id", "bigImage");
bigImage.setAttribute("src", "images/gallery/1.jpg");
var gal = document.getElementById("gallery");
var gal_parent = gal.parentNode;
gal_parent.insertBefore(bigImage, gal);
}
There's also some code setting the onclick events on the links, but I don't think it's relevant in this situaltion. As I said the problem is only with IE. Thanks in advance!
Sounds like IE is computing the width and height attributes for #bigImage when it is created and then not updating them when the src is changed. The other browsers are probably noting that they had to compute the image dimensions themselves so they recompute them when the src is changed. Both approaches are reasonable enough.
Do you know the proper size of the image inside showBigImage()? If you do, then set the width and height attributes explicitly when you change the src:
function showBigImage(link) {
var source = link.getAttribute("href");
var bigImage = document.getElementById("bigImage");
bigImage.setAttribute("src", source);
bigImage.setAttribute("width", the_proper_width);
bigImage.setAttribute("height", the_proper_height);
return false;
}
If you don't know the new dimensions then change showBigImage() to delete #bigImage and create a new one:
function createBigImage(src) {
var bigImage = document.createElement("img");
bigImage.setAttribute("id", "bigImage");
bigImage.setAttribute("src", src || "images/gallery/1.jpg");
var gal = document.getElementById("gallery");
gal.parentNode.insertBefore(bigImage, gal);
}
function showBigImage(link) {
var bigImage = document.getElementById("bigImage");
if(bigImage)
bigImage.parentNode.removeChild(bigImage);
createBigImage(link.getAttribute("href"););
return false;
}