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.
Related
How to get folder location from IMG URL example https://cdn1.example.com/thumbs/23432/0.jpg via jQuery and to allow to set max images can be found on the folder example Total = 5 ( Images can be found in the folder URL).
The script after to generate the images URLs from the IMG URL example
https://cdn1.example.com/thumbs/23432/0.jpg
https://cdn1.example.com/thumbs/23432/1.jpg
https://cdn1.example.com/thumbs/23432/2.jpg
https://cdn1.example.com/thumbs/23432/3.jpg
https://cdn1.example.com/thumbs/23432/4.jpg
When a person hovers the "a link" with the mouse the image rotator to start with IMG 0.jpg ( First image from the list ) and END with 4.jpg
When the person remove the mouse from the a href to show the original image from <img src="(original link)" />.
I try some scripts but most of them need to add the links manually I was hoping I can find a script to work this way, and I see some issue with most thumb rotators, when they start to rotate some images is not fully loaded, I was hoping if there's a way to load images first before start rotate them.
HTML example:
<img src="https://cdn1.example.com/thumbs/23432/2.jpg" />
var hoverstatus = false;
var imgArr = ["https://picsum.photos/200/300", "https://picsum.photos/id/237/200/300", "https://picsum.photos/seed/picsum/200/300"];
function imagehover() {
hoverstatus = true;
for (var i = 0; i < imgArr.length; i++) {
var time = 1000 * (i + 1);
changeImage(i, time);
}
}
function changeImage(i, time) {
if (hoverstatus == false) {
imagehoverout();
return;
}
setTimeout(function() {
console.log(i);
jQuery('.video img').attr('src', imgArr[i]);
}, time);
}
function imagehoverout() {
hoverstatus = false;
$('.video img').attr('src', 'https://picsum.photos/200/300.jpg');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img onmouseover="imagehover()" onmouseout="imagehoverout()" src="https://picsum.photos/200/300.jpg" />
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...
i'm trying to cycle through 3 images using a for loop in javascript. Here is my code:
<img name="slide" width="300" height="300">
var i=0;
var images = [];
images[0] = "images/1.jpg";
images[1] = "images/2.jpg";
images[2] = "images/3.jpg";
function changeImage () {
for(i=0; i < images.length; i++) {
document.slide.src = images[i];
}
}
window.onload = changeImage;
Currently, only image 3 is displayed. Anyone know what i'm doing wrong here?
Yes - this is because your for loop run finishes instantly so there's no time for slides 1 and 2 to be shown.
Give this a try:
var currentImage = 0,
images = [
"https://unsplash.it/200/300?image=100",
"https://unsplash.it/200/300?image=101",
"https://unsplash.it/200/300?image=102"
];
function initSlideshow() {
setImage(0);
setInterval(function(){
nextImage();
},1000);
}
function nextImage() {
if(images.length === currentImage + 1){
currentImage = 0;
} else {
currentImage++;
}
setImage(currentImage);
}
function setImage(image) {
document.querySelectorAll('.slide')[0].src = images[image];
}
window.onload = initSlideshow();
Example: https://jsfiddle.net/vvbdwazc/
Currently, only image 3 is displayed. Anyone know what i'm doing wrong
here?
it's all being displayed but the reason why you can only see the 3rd image is because you're not pausing for a certain time before displaying the next image hence it seems like it's not working.
use setInterval() method to show each image after a specified time.
Example:
var i=0;
var images = [];
images[0] = "images/1.jpg";
images[1] = "images/2.jpg";
images[2] = "images/3.jpg";
function changeImage () {
for(i=0; i < images.length; i++) {
document.slide.src = images[i];
}
}
var myVar = setInterval(function(){ changeImage() }, 1000);
You may later wish to prevent the setInterval() method from executing any longer in that case have a look at clearInterval().
window.onload = changeImage; tells me you want to change the image on page load event? In other words, the image changes only upon page load (or refresh).
Since state is not maintained by default (eg local storage or session storage or cookies) your best bet would be to use a random generator to choose randomly. See Generating random whole numbers in JavaScript in a specific range?
This is because the for works so fast it gets quickly to the third image. You could use instead some setInterval like this:
<img id="slide" width="300" height="300">
<script>
var images = [];
images[0] = "images/1.jpg";
images[1] = "images/2.jpg";
images[2] = "images/3.jpg";
var i = 0;
setInterval(function() {
var slide = document.querySelector("#slide"); //Select the img element by ID
slide.src = images[i++];
if(i > images.length - 1)
i = 0;
}, 1000); //Time in milliseconds
</script>
This will change constantly back to the first image when it reaches the last one.
Edit: Forgot to mention. setInterval works like a "repeater", it will work indefinitely until you clear it. To clear it you need to asign it to a variable and then use clearInterval passing the variable.
var interval = setInterval(function(){}, 1000) //example
clearInterval(interval);
Like so.
I have a simple fading slide-show which works great for a while, but runs to about 300 images. After a while it starts jumping and missing some, which I assume is down to too many images being loaded. Is there a way of 'unloading' images once viewed, or is it likely to be something else?
Let all images load before you display the slide show, or skip not loaded images.
You could do this like this for example:
var images = ['./path1.jpg', './path2.jpg']; // Array with all images
var imageCount, imagesLoaded, c;
imageCount = images.length; // Get images count
imagesLoaded = 0;
for (c = 0; c < imageCount ; c++){ // Loop thorough all images
var image = document.createElement('img'); // Create img tag
image.setAttribute('src', images[c]); // Set src attribute
document.body.appendChild(image); // Add img tag to body
image.onload = function() {
imagesLoaded++; // Add loaded image to loaded images count
console.log('Loaded: ' + imagesLoaded + '/' + imageCount); // debug
if (imagesLoaded == imageCount){ // when all images loaded
// Start your slideshow
}
}
}
What I would like is when the new image loads on mouseover, it does not move any objects above it. I've tried containing it in a div, but for some reason I cannot get this to work. Any help or ideas on what I could do?
Here is a page with what it does now:
click
And here is my code:
<head>
<script type="text/javascript">
function rollover() {
if (!document.getElementById) return
var imgOrSrc;
var imgPreload = new Array();
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
if (images[i].getAttribute('rsrc')) {
imgPreload[i] = new Image();
imgPreload[i].src = images[i].getAttribute('rsrc');
images[i].onmouseover = function() {
imgOrSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('rsrc'))
}
images[i].onmouseout = function() {
this.setAttribute('src',imgOrSrc)
}
}
}
}
</script>
</head>
<body onLoad="rollover()">
<div id="landimage">
<img src="/images/braeden.png" rsrc="/images/braeden2.png" border="0">
</div>
</body>
This is simply because the images are not of the same dimensions. The easiest method would be to increase the canvas size of /images/braeden.png and adding a whitespace to the top of it so it becomes exactly the same height as /images/braeden2.png
If you do not want to to that, then you have to add padding-top to the containing div, when the smaller image is being displayed, to cater for the height difference.