How to set timeout function for Rollover - javascript

Below is my code, this is basic question can anyone help to fix this,
I want image to appear after sometime when user hover on it. say for eg 3 sec
function MouseRollover(MyImage) {
MyImage.src = "http://www.blirk.net/wallpapers/800x600/universe-wallpaper-2.jpg";
}
function MouseOut(MyImage) {
MyImage.src = "https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg";
}
<div align="center">
<!--The rollover image displays here.-->
<img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg" border="0px" width="" height="" onMouseOver="setTimeout(MouseRollover(this), 3000);" onMouseOut="MouseOut(this)" />
</div>

You can set the setTimeout inside the function so that it does not change the image source for 3 seconds like below. Although in this example if the user stops hovering before 3 seconds, then the onMouseOut will finish firing before the onMouseOver, which leaves the user with the hovered image.
<html>
<head>
<script language="javascript">
function MouseRollover(MyImage) {
setTimeout(function(){
MyImage.src = "http://media.giphy.com/media/DOs3KXoWEpTxK/giphy-tumblr.gif";
}, 3000);
}
function MouseOut(MyImage) {
MyImage.src = "http://plusquotes.com/images/quotes-img/cool_cat.jpg";
}
</script>
</head>
<body>
<div align="center">
<!--The rollover image displays here.-->
<img src="http://plusquotes.com/images/quotes-img/cool_cat.jpg"
border="0px"
width="300px" height="auto"
onMouseOver="MouseRollover(this)"
onMouseOut="MouseOut(this)" />
</div>
</body>
</html>

Ok, below is a script that will change the image 3 seconds after mousing over. I slightly modified your code as it's a lot easier to work with scripts when it's not embedded in your HTML. Hope this helps.
const universe = 'http://www.blirk.net/wallpapers/800x600/universe-wallpaper-2.jpg';
const rectangle = 'https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg';
const img = document.querySelector('img');
img.addEventListener('mouseover', (e) => {
setTimeout(()=>{
img.src = universe;
}, 3000);
})
<html>
<head>
</head>
<body>
<div align="center">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg">
</div>
</body>
</html>

Here is an example, mouse over wait 3 seconds.
Also resets when mouse leaves..
var mrSmiley = document.querySelector('.img');
var timer;
mrSmiley.onmouseenter = function () {
timer = setTimeout(function () {
mrSmiley.classList.add('img-3sec');
}, 3000);
}
mrSmiley.onmouseleave = function () {
clearTimeout(timer);
mrSmiley.classList.remove('img-3sec');
}
.img {
cursor: pointer;
width: 128px;
height: 128px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 5.8208332 5.8208335"><defs><linearGradient gradientUnits="userSpaceOnUse" y2="537.87" x2="481.51" y1="547.94" x1="481.6" id="0"><stop stop-color="#ffeb96"/><stop offset="1" stop-color="#fff1b7"/></linearGradient></defs><g transform="matrix(.43294 0 0 .43294-205.62-231.99)"><circle cx="481.66" cy="542.55" r="5.5" fill="url(#0)"/><g transform="translate(-7.44.975)"><g fill="#414141"><circle r=".6" cy="542.3" cx="485.13"/><circle r=".6" cy="542.3" cx="491.15"/></g><path d="m486.66 544.18h2.912" fill="none" fill-rule="evenodd" stroke="#414141" stroke-linecap="round" stroke-width=".275"/></g></g></svg>');
}
.img-3sec {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 5.8208332 5.8208335"><defs><linearGradient id="0" x1="488.2" y1="547.74" x2="488.11" y2="537.68" gradientUnits="userSpaceOnUse"><stop stop-color="#ffeb96"/><stop offset="1" stop-color="#fff1b7"/></linearGradient></defs><g transform="translate(0-291.18)"><g transform="matrix(.43294 0 0 .43294-209.18 68.12)"><g transform="translate(1.612-20.413)"><circle r="5.5" cy="542.35" cx="488.27" fill="url(#0)"/><g fill="#414141"><circle cx="485.18" cy="542.3" r=".6"/><circle cx="491.35" cy="542.3" r=".6"/></g></g><g transform="translate(-6.818-.4)" fill="#f7aa86"><path d="m499.05 523.96c0 .07.783.139.779.207-.11 1.575-1.461 2.821-3.116 2.827-1.648.006-3.01-1.222-3.135-2.788-.006-.074.305-.15.304-.225l2.82-.022z"/><path d="m493.66 523.64h6.077c.049 0 .088.039.088.088v.385c0 .049-.001.206-.001.206h-6.234c0 0-.001-.157-.001-.206v-.385c0-.049.039-.088.088-.088"/></g></g><path d="m2.113 294.66h1.594v.769.773c0 .426-.343.769-.769.769h-.057c-.426 0-.769-.343-.769-.769v-.773z" fill="#eb8671" fill-rule="evenodd"/></g></svg>');
}
Mouse over Mr Happy for 3 seconds..
<div class="img">
</div>

Related

simple picture over picture in html

im trying to build a website, where u click on a text, and a picture appears, when you click on this picture, the next one appears and so on. If you reach the last picture, the first one should appear if you click on it. My code is very complicated and it does not work with the last picture. I hope somebody can help me!
<head>
<script type="text/javascript">
function showImage() {
document.getElementById('loadingimage').style.visibility="visible";
}
function showImage2() {
document.getElementById('loadingimage2').style.visibility="visible";
}
function showImage3() {
document.getElementById('loadingimage3').style.visibility="visible";
}
</script>
</head>
<body>
<a onclick="showImage()">Hier clicken</a>
<img onclick="showImage2()" id="loadingimage" src="pic/pic1.jpg" alt="" style="visibility:hidden"></img>
<img onclick="showImage3()" id="loadingimage2" src="pic/pic2.jpg" alt="" style="visibility:hidden"></img>
<img onclick="showImage4()" id="loadingimage3" src="pic/pic3.jpg" alt="" style="visibility:hidden"></img>
</body>
For simplicity, the button will be hidden after you click the first time on the button.
let start = 0,
total = 3,
hasStarted = false;
const images = [...document.querySelectorAll(".image")];
const button = document.querySelector("button");
function showImage() {
if (!hasStarted) {
button.classList.add("hide")
hasStarted = !hasStarted;
}
images.forEach(image => {
if (image.classList.contains("show")) {
image.classList.remove("show");
image.classList.add("hide");
}
})
document.querySelector(`.image${start}`).classList.add("show");
++start;
start = start % total;
}
images.forEach(image => {
image.addEventListener("click", showImage)
})
.hide {
visibility: hidden;
}
.show {
visibility: visible;
}
<button onclick="showImage()">Hier clicken</button>
<img class="image image0 hide" id="loadingimage1" src="https://source.unsplash.com/random/200x200" alt=""></img>
<img class="image image1 hide" id="loadingimage2" src="https://source.unsplash.com/random/200x200" alt=""></img>
<img class="image image2 hide" id="loadingimage3" src="https://source.unsplash.com/random/200x200" alt=""></img>
I feel this is what you need:
<head>
<script type="text/javascript">
function showImage() {
document.getElementById('loadingimage').style.visibility = "visible";
document.getElementById('loadingimage').style.position = 'absolute';
}
function showImage2() {
document.getElementById('loadingimage2').style.visibility = "visible";
document.getElementById('loadingimage2').style.zIndex = '10';
document.getElementById('loadingimage2').style.position = 'absolute'
}
function showImage3() {
document.getElementById('loadingimage3').style.visibility = "visible";
document.getElementById('loadingimage3').style.zIndex = '15';
document.getElementById('loadingimage3').style.position = 'absolute'
}
function showImage4() {
document.getElementById('loadingimage').style.zIndex = '20';
}
</script>
</head>
<body>
<a onclick="showImage()">Hier clicken</a>
<img onclick="showImage2()" id="loadingimage" src="https://source.unsplash.com/random/200x201" alt="" style="visibility:hidden">
<img onclick="showImage3()" id="loadingimage2" src="https://source.unsplash.com/random/200x202" alt="" style="visibility:hidden">
<img onclick="showImage4()" id="loadingimage3" src="https://source.unsplash.com/random/200x203" alt="" style="visibility:hidden">
</body>

Problem with IF statement for DOM animation & effects with JQuery' assignment

I'm creating a simple slideshow, it's part of my 'DOM animation & effects with JQuery' assignment, focusing on JavaScript, HTML, CSS and jQuery.
The assignment is simple: Create a slideshow with 2 buttons (Prev & Next). When I click on the corresponding button it should take me to the next slide or the previous slide.
var $one = $(".one")
var $two = $(".two");
var $three = $(".three");
var $four = $(".four");
var $five = $(".five");
var $six = $(".six");
var $seven = $(".seven");
$two.hide();
$three.hide();
$four.hide();
$five.hide();
$six.hide();
$seven.hide();
$one.slideDown();
var $prev = $("prev");
var $next = $("next");
$next.on("click", function() {
if ($one.slideDown()) {
$one.hide();
$two.slideDown();
} else {
$one.slideDown();
}
});
$prev.on("submit", function() {
if ($one.slideDown()) {
$one.hide();
$six.slideDown();
} else {
$one.slideDown();
}
});
img {
border: 6px rgb(245, 166, 166) solid;
}
<img src="https://www.kasandbox.org/programming-images/food/mushroom.png" width="500" alt="Mushrooms" class="one">
<img src="https://www.kasandbox.org/programming-images/food/berries.png" width="500" alt="Berries" class="two">
<img src="https://www.kasandbox.org/programming-images/food/broccoli.png" width="500" alt="Broccoli" class="three">
<img src="https://www.kasandbox.org/programming-images/food/brussels-sprouts.png" width="400" alt="Sprouts" class="four">
<img src="https://www.kasandbox.org/programming-images/food/chocolates.png" width="500" alt="Chocolates" class="five">
<img src="https://www.kasandbox.org/programming-images/food/fruits.png" width="500" alt="Fruits" class="six">
<img src="https://www.kasandbox.org/programming-images/food/cake.png" width="500" alt="Cake" class="seven">
<button type="submit">⬅︎ Prev︎</button>
<button type="click">Next ➡</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
I've spent much time trying to figure out the best way to do this and then came up with the solution above, however the IF statement isn't working too well.
I'm not looking for the solution or straight up answer - just guidance, of where the problem is/hints on how to tackle it (also a link to a video that could give me a similar problem/walkthrough/tutorial would be greatly appreciated!).
Thanks for all your help!
Your code looks much better like this. There are a few edge cases but you should be able to handle them now.
What I did:
- Gave a slide class to the slider
- I add is-active class to the active slider
- Remove the is-active when button is clicked
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project: Interactive slideshow</title>
<style>
img {
border: 6px rgb(245, 166, 166) solid;
}
</style>
</head>
<body>
<br>
<img src="https://www.kasandbox.org/programming-images/food/mushroom.png" width="500" alt="Mushrooms" class="slide" >
<img src="https://www.kasandbox.org/programming-images/food/berries.png" width="500" alt="Berries" class="slide" >
<img src="https://www.kasandbox.org/programming-images/food/broccoli.png" width="500" alt="Broccoli" class="slide" >
<img src="https://www.kasandbox.org/programming-images/food/brussels-sprouts.png" width="400" alt="Sprouts" class="slide" >
<img src="https://www.kasandbox.org/programming-images/food/chocolates.png" width="500" alt="Chocolates" class="slide" >
<img src="https://www.kasandbox.org/programming-images/food/fruits.png" width="500" alt="Fruits" class="slide" >
<img src="https://www.kasandbox.org/programming-images/food/cake.png" width="500" alt="Cake" class="slide" >
<button class="prev">⬅︎ Prev︎</button>
<button class="next">Next ➡</button>
<script>
var slide = $(".slide")
slide.hide();
slide.first().show().addClass('is-active');
// slide.first().slideDown();
//variables
var prev = $(".prev");
var next = $(".next");
//Next button action
next.on("click", function() {
slide.hide();
$('.is-active').removeClass('is-active').next().addClass('is-active').show();
});
//Prev button action
prev.on("click", function() {
slide.hide();
$('.is-active').removeClass('is-active').prev().addClass('is-active').show();
});
</script>
</body>
</html>
NOTE: Please try avoiding classes like one, two, three so on. Because if there are like 1000 images you will not add 1000 lines of code because that will become a mess.

Hover on svg for affecting the other element property doesn't work

HTML:
<div>
<svg class="velveti-grid-point" width="100" height="100" style="height: 120px; width: 625px;">
<circle class="myPoint" cx="500" cy="105" r="5" fill="#80E1EE" />
</svg>
<div class="theContainer">bg-color</div>
</div>
CSS:
.myPoint:hover + .theContainer {
background-color: black;
}
Problem: When i am hovering on the blue svg circle the background-color should be displayed on the text, but with svg it doesn't work. What is the problem? what do i need to do?
The demo: http://jsfiddle.net/wy6y66ox/
This has nothing to do with SVG per se.
+ is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element.
Because .myPoint is not a sibling of .theContainer your selector will not work.
You would need javascript in this instance.
Paulie_D is right.You have to use Javascript.
HTML
<div>
<svg class="velveti-grid-point" width="100" height="100" style="height: 120px; width: 625px;">
<circle id="svgid" class="myPoint" cx="500" cy="105" r="5" fill="#80E1EE" />
</svg>
<div id="divcolor" class="theContainer">bg-color</div>
</div>
JS
var svg = document.getElementById( 'svgid' );
var div = document.getElementById( 'divcolor' );
svg.onmouseover = function() {
div.style.backgroundColor = 'blue';
};
svg.onmouseout = function() {
div.style.backgroundColor = 'transparent';
};
Demo Here

js dice 6 images and stopping one by one

Im currently making a site that will have 6 different images with the image name mydice1, mydice2, mydice3 , mydice4, mydice5 and mydice6.
also in my assets/bilder/sekserspillet folder i have dices image with the name die-NumberOfDice.gif
How can i edit this function to do the following:
when starting all of the 6 images are diceing ( changing from 1-6), one after one, starting with mydice1 they will stop rolling ( aka stop changing images, and get back to the original image), then a few secs later, the image with dice mydice2 will do the same, etc.
so in short:
all dices are changing images when running, and then one by one, they will stop rolling and get back to the original image.
function throwdices() {
var spins = spins;
var curSpin = 0;
var spinInterval = setInterval(function() {
curSpin++;
if (curSpin < spins) {
var randomdices=Math.round(Math.random()*4.5);
document.images["mydice1"].src="assets/bilder/sekserspillet/die-"+randomdices+".gif";
} else {
clearInterval(spinInterval);
throwdice();
}
}, 500);
}
my html:
<img src="assets/bilder/sekserspillet/die-<?echo $terninger[0]?>.gif" width="45px" height="45px" name="mydice1">
<img src="assets/bilder/sekserspillet/die-<?echo $terninger[1]?>.gif" width="45px" height="45px" name="mydice2">
<img src="assets/bilder/sekserspillet/die-<?echo $terninger[2]?>.gif" width="45px" height="45px" name="mydice3">
<img src="assets/bilder/sekserspillet/die-<?echo $terninger[3]?>.gif" width="45px" height="45px" name="mydice4">
<img src="assets/bilder/sekserspillet/die-<?echo $terninger[4]?>.gif" width="45px" height="45px" name="mydice5">
<img src="assets/bilder/sekserspillet/die-<?echo $terninger[5]?>.gif" width="45px" height="45px" name="mydice6">
Some years ago i had answered a similar question.
Here is an adaptation for your needs: http://jsfiddle.net/gaby/zZUgF/262/
The difference is that i am using div elements instead of images, and the image is a sprite (with all states inside it) so that all states of the dice are loaded at once.
$('#throw').click(function () {
$('.dice').each(function(index){
throwAnimatedDice( this, index );
});
});
function throwAnimatedDice(elem, spins) {
var value = Math.round(Math.random() * 5) + 1;
displayDice(10 + (spins*5), value, $(elem));
return value;
}
function displayDice(times, final, element) {
element.removeClass();
if (times > 1) {
element.addClass('dice dice_' + (Math.round(Math.random() * 5) + 1));
setTimeout(function () {
displayDice(times - 1, final, element);
}, 100);
} else element.addClass('dice dice_' + final);
}
.dice {
background-image:url('http://www.clker.com/cliparts/e/7/4/4/1194991183406177705six-sided_dice_faces_lio_01.svg.med.png');
height:49px;
width:49px;
display:inline-block;
margin:5px;
}
.dice_1 {
background-position:0px 0px;
}
.dice_2 {
background-position:-50px 0px;
}
.dice_3 {
background-position:-101px 0px;
}
.dice_4 {
background-position:-151px 0px;
}
.dice_5 {
background-position:-201px 0px;
}
.dice_6 {
background-position:-251px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dice dice_6"></div>
<div class="dice dice_6"></div>
<div class="dice dice_6"></div>
<div class="dice dice_6"></div>
<div class="dice dice_6"></div>
<div class="dice dice_6"></div>
<br />
<br />
<button id="throw">throw dice</button>

On-Click img border = #color - Multiple images - Only need 1 highlighted at a time

Basically what I am trying to accomplish is create a list of images (let's say 10) and upon clicking any of these images, their border changes to a specific color; currently accomplishing this with a simple onClick event with JS. That's not an issue. The trouble comes in when clicking a second or third or forth image; all of the images clicked remain highlighted, of course. I would like to set it so that only the last (current) image selected in the set remain with the border color changed.
What is the best way to accomplish this simple effect?
Below is a simple working example:
<!doctype html>
<html>
<head>
<title>Website.com</title>
<style type="text/css">
.normal {
border:none;
}
.highlighted {
border:1px solid #336699;
}
</style>
<script type="text/javascript">
var ImageSelector = function() {
var imgs = null;
var selImg = null;
return {
addImages: function(container) {
imgs = container.getElementsByTagName("img");
for(var i = 0, len = imgs.length; i < len; i++) {
var img = imgs[i];
img.className = "normal";
img.onclick = function() {
if(selImg) {
selImg.className = "normal";
}
this.className = "highlighted";
selImg = this;
};
}
}
};
}();
</script>
</head>
<body>
<div>
<div id="menu">
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
</div>
</div>
<script type="text/javascript">
var div = document.getElementById("menu");
ImageSelector.addImages(div);
</script>
</body>
</html>
This does not use any library such as jQuery. Its just plain 'ol js. Also the code is for the sake of example
I would take advantage of jQuery. Give each of your images a class, for example, "imageHighlight" or something. Then you could do something like this (completely untested):
$(document).ready(function() {
$('img.imageHighlight').click(function() {
$('img.imageHighlight').css('border-width', 0);
$(this).css('border-width', '3px');
});
});
And have some CSS with it:
img.imageHighlight {
border: 0px solid #345678;
}
There's probably even a better way to do it by toggling CSS classes or something, but I'm lazy at the moment. Still digesting lunch :)

Categories

Resources