I want to change 2 pictures while mouseover. #E.G. once i will mouseover the image will change...it will not change until I mouseover again. how can I do it. Here's my code
function updatePic(){
if(document.getElementById("dpic").src == "images/h1.jpg"){
document.getElementById("dpic").src = "images/h.jpg";
}
if(document.getElementById("dpic").src == "images/h.jpg"){
document.getElementById("dpic").src = "images/h1.jpg";
}
}
UPDATED: I think onmouseenter is the mouse event that you're looking for:
function change() {
var current = document.getElementById("image").getAttribute("src");
if (current == "http://i.imgur.com/HNj6tRD.jpg") {
document.getElementById("image").setAttribute("src", "http://i.imgur.com/3jxqrKP.jpg");
} else {
document.getElementById("image").setAttribute("src", "http://i.imgur.com/HNj6tRD.jpg");
}
}
#image {
width:550px;
height:150px;
position:relative;
background-repeat: no-repeat;
background-size:100% 100%;
}
<img id="image" alt=image src="http://i.imgur.com/HNj6tRD.jpg" onmouseenter="change()">
The may well be a more efficient way but if you just want it to work try your JS like this.
var x = 0;
function rollOver() {
var image1 = "url(images/RIOBtn1.gif)";
var image2 = "url(images/RIO2Rollover.gif)";
var image3 = "url(images/RIO1Rollover.gif)";
var array11 = [image1,image2,image3];
if (x == 0){
document.getElementById("myButton").style.backgroundImage = array11[x];
x++;
} else if (x == 1) {
document.getElementById("myButton").style.backgroundImage = array11[x];
x++;
} else if (x == 2) {
document.getElementById("myButton").style.backgroundImage = array11[x];
x = 0;
}
}
All this does is puts the url's into an array and will continue to loop through them. I done this as a quick so it is a little messy.
In the HTML it is just:
<button id="myButton" onmouseover="rollOver()"></button>
EDIT ***********************************
As you want the src to change, the code is almost the same but changing the source.
var x = 0;
function rollOver() {
var image1 = "images/RIOBtn1.gif";
var image2 = "images/RIO2Rollover.gif";
var image3 = "images/RIO1Rollover.gif";
var array11 = [image1,image2,image3];
if (x == 0){
document.getElementById("myButton").src = array11[x];
x++;
} else if (x == 1) {
document.getElementById("myButton").src = array11[x];
x++;
} else if (x == 2) {
document.getElementById("myButton").src = array11[x];
x = 0;
}
}
<img src="images/HomeBtn1.gif" id="myButton" onmouseover="rollOver()">
$(document).ready(function () {
var strImgSrc1 = "http://virtualrailfan.com/wp-content/uploads/2014/10/200_200_sample.jpg";
var strImgSrc2 = "http://www.eminenstore.com/wp-content/uploads/2012/04/samples.jpg";
$("img").mouseover(function () {
if ($(this).attr("src") === strImgSrc1)
{
$(this).attr("src", strImgSrc2);
}
else
{
$(this).attr("src", strImgSrc1);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img border="1" src="http://www.eminenstore.com/wp-content/uploads/2012/04/samples.jpg" height="300" width="300"/>
J.Hasan, there are easier ways. Can you set one of the images as a background image to a div?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
div {
width:100px;
height:100px;
background: url(image1.jpg);
background-repeat: no-repeat;
background-size:100% 100%;
}
img {
width:100%;
height:100%;
opacity:0;
}
img:hover {opacity:1;}
</style>
</head>
<body>
<div>
<img src="image2.jpg">
</div>
</body>
</html>
If it's a slideshow you want, try this. The beauty of this slideshow is that it does not load all the images when the page loads. Just make a white image (img0.jpg) to set the size of the slideshow in the "slideshowWrap" div.
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="_/js/slides.js"></script>
<script>
function showSlides(){
// SETTINGS
var rotation = 5000; // set rotation speed (milliseconds)
var transition = 1000; // set transition speed (milliseconds)
var path = "_/images/banners/"; // the path to the slides (images)
// SLIDES
var slides = [ // add slides (images) to the slideshow (no comma after last slide)
"img1.jpg",
"img2.jpg",
"img3.jpg",
"img4.jpg"
];
// SLIDESHOW
var slideAmt = slides.length -1;
slideTrn ++;
slideTrn = (slideTrn > 2)?1:slideTrn;
if(firstSlide == true){
// slideCnt = 0
slideCnt ++;
$("#slide1").attr("src", path + slides[slideCnt]); // slide 0
$("#slide1").css({"z-index":"1","opacity":"1"});
slideCnt ++;
slideCnt = (slideCnt > slideAmt)?0:slideCnt;
$("#slide2").attr("src", path + slides[slideCnt]); // slide 1
$("#slide2").css({"z-index":"2",});
firstSlide = false;
}
else{
if(slideTrn == 2){
// slideCnt = 1
$("#slide2").animate({opacity:"1"}, transition, function(){ // slide 1 fades in
$("#slide1").css({"opacity":"0"}); // slide 0
$("#slide2").css({"z-index":"1"}); // slide 1
$("#slide1").css({"z-index":"2"});
slideCnt ++;
slideCnt = (slideCnt > slideAmt)?0:slideCnt;
$("#slide1").attr("src", path + slides[slideCnt]); // slide 2
});
}
else{
// slideCnt = 2
$("#slide1").animate({opacity:"1"}, transition, function(){
$("#slide2").css({"opacity":"0"});
$("#slide1").css({"z-index":"1"});
$("#slide2").css({"z-index":"2"});
slideCnt ++;
slideCnt = (slideCnt > slideAmt)?0:slideCnt;
$("#slide2").attr("src", path + slides[slideCnt]);
});
}
}
var t = setTimeout(showSlides, rotation);
}
function setValues(){
firstSlide = true;
slideCnt = -1;
slideTrn = 0;
manSlide = 0;
}
window.addEventListener("load", setValues);
window.addEventListener("load", showSlides);
</script>
<style>
#slideshowWrap {
width:100%;
min-height:1px;
overflow:auto;
</style>
</head>
<body>
<div id="slideshowWrap" style="position:relative;overflow:hidden;">
<img alt="" class="blank" src="img0.jpg"> <!-- set white image just to set the size of div "slideshowWrap" -->
<img alt="" class="slide" src="_/" id="slide1">
<img alt="" class="slide" src="_/" id="slide2">
</div>
</body>
</html>
Related
I tried few different things with no luck. I want the current image to slowly fade out and fade into the next image.
HTML
<div class="TestRotator " , style="text-align: center; padding-top: 20px; padding-bottom: 50px;">
<img
src="/Users/loh/Documents/app1/images/0.png"
,
height="130"
id="rotator"
,
class="img-fluid, rounded image-hover"
alt="Responsive image"
/>
</div>
<script src="js_src/imagechanger.js"></script>
JS
(function () {
var rotator = document.getElementById("rotator"); // change to match image ID
var imageDir =
"/Users/loh/Documents/app1/images/";
var delayInSeconds = 3;
var num = 0;
let currentIndex = 0;
const totalImages = 16;
const changeImage = function () {
var incre = Math.floor(Math.random() * (totalImages-1) ) + 1;
num += incre;
num = num % totalImages;
rotator.src = imageDir + num + ".png";
};
setInterval(changeImage, delayInSeconds * 1000);
})();
The trick I used is to use a background image instead of a real image. This allows to use some simple CSS to animate everything. For a JS only solution I suggest using jQuery, tho.
<html>
<head>
<style>
#view {
background-image: url("/pictures/0.png");
transition: background-image 1s;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="view"></div>
<script>
const view = document.getElementById("view");
const imageDir = "/pictures/";
const delayInSeconds = 2; //more then #view transition timing
const totalImages = 4; //0.png; 1.png; ...; 4.png;
var i = 0;
const changeImage = () => {
i += Math.floor(Math.random() * (totalImages-1) ) + 1;;
i %= totalImages;
view.style["background-image"] = `url(${imageDir}${i}.png)`;
};
changeImage(); //call immediately without having to wait for delayInSeconds
setInterval(changeImage, delayInSeconds * 1000);
</script>
</body>
If you want to do animation, then I recommend looking into a library to help with that. Here I'm using jQuery, and all I need are basically delay() and fadeOut(), though equivalents should be found in most other popular libraries.
In addition: I am setting the z-index of the images, so that the first image to show has the highest z-index, the second image the second-highest, and so on. Working code example...
$('#image1').delay(1000).fadeOut(500);
$('#image2').delay(2000).fadeOut(500);
$('#image3').delay(3000).fadeOut(500);
$('#image4').delay(4000).fadeOut(500);
$('#image5').delay(5000).fadeOut(500);
$('#image6').delay(6000).fadeOut(500);
div {
position:fixed;
background-color:white;
font-size:500%;
}
#image1 {
z-index:10;
}
#image2 {
z-index:9;
}
#image3 {
z-index:8;
}
#image4 {
z-index:7;
}
#image5 {
z-index:6;
}
#image6 {
z-index:5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="image1">😀</div>
<div id="image2">🤖</div>
<div id="image3">🎃</div>
<div id="image4">😺</div>
<div id="image5">🐶</div>
<div id="image6">🐵</div>
Well...i am making a webpage (a pretend e-shop),and i want to put a slideshow with some text beneath each picture..so far i made the code for the picture slideshow
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Slide Show</title>
<style type="text/css">
body {
text-align: center;
margin: 0;
padding: 0;
}
#imageContainer {
<img id="imgreal" src="pics\bg.jpg" />
min-height: 550px;
document.getElementByID("imgreal").style.backgroundImage = string;
}
a {
text-decoration: none;
padding: 5px;
color: #cccc00;
}
</style>
<script type="text/javascript">
var imgSlide;
var pic = 0;
window.onload = function ()
{
imgSlide = document.getElementById('img');
// preload images
images = new Array();
images[0] = new Image();
images[0].src = "images/img1.jpg" ;
images[1] = new Image();
images[1].src = "images/img2.jpg";
images[2] = new Image();
images[2].src = "images/img3.jpg";
images[3] = new Image();
images[3].src = "images/img4.jpg";
images[4] = new Image();
images[4].src = "images/img5.jpg";
images[5] = new Image();
images[5].src = "images/img6.jpg";
}
function slide()
{
imgSlide.src = images[pic].src;
if(pic < images.length-1) // images.length - 1 can be used here
{
pic++;
}
else
{
pic = 0
}
}
function prev()
{
if(pic == 0)
{
pic = 3;
imgSlide.src = images[pic].src;
}
else
{
pic--;
imgSlide.src = images[pic].src;
}
}
function next()
{
if(pic == images.length)
{
pic = 0;
imgSlide.src = images[pic].src;
}
else
{
pic++;
imgSlide.src = images[pic].src;
}
}
</script>
<DIV ID="SLIDESTEXT"> </DIV>
</head>
<body background="pics\bg.jpg">
<div id="imageContainer"><img id="img" src="images/img1.jpg" alt="image" title="image"/></div>
Previous Next
</body>
</html>
but i can not insert text to slide along with each picture...I'd appreciate some help very much
<div id="imageContainer"><img id="img" src="images/img1.jpg" alt="image" title="image"/></div>
<div><caption>hello</caption></div>
Just put another div under the images, using some kind of tag. You could assign values to it within the JS.
I'm trying to make an image that moves to the right on my website. When you click the image, it should move to the left. For now, this doesn't happen, any ideas? If possible, in pure Javascript and no Jquery ;)
Also, if you click the image for a second time, it should move to the right again. Every consecutive time, the image should move to the other side. I guess this would be best with a for-loop?
<script type"text/javascript">
window.onload = init;
var winWidth = window.innerWidth - movingblockobject.scrollWidth; //get width of window
var movingblock = null //object
movingblock.onclick = moveBlockLeft();
function init() {
movingblock = document.getElementById('movingblockobject'); //get object
movingblock.style.left = '0px'; //initial position
moveBlockRight(); //start animiation
}
function moveBlockRight() {
if (parseInt(movingblock.style.left) < winWidth) { // stop function if element touches max window width
movingblock.style.left = parseInt(movingblock.style.left) + 10 + 'px'; //move right by 10px
setTimeout(moveBlockRight,20); //call moveBlockRight in 20 msec
} else {
return;
}
}
function moveBlockLeft () {
movingblock.style.right = parseInt(movingblock.style.right) + 10 + 'px'
}
</script>
Please first go through the Basics of javascript before trying out something .
window.onload = init;
var winWidth = window.innerWidth;
var movingblock = null;
var intervalid = null;
var isLeft = false;
function init() {
console.log('Init');
movingblock = document.getElementById('movingblockobject');
movingblock.style.left = '0px';
intervalid = setInterval(function() {
moveBlock(true);
}, 2000);
movingblock.onclick = function() {
moveBlock(false);
};
}
function moveBlock(isSetInterval) {
if (!isSetInterval)
isLeft = !isLeft;
if (parseInt(movingblock.style.left) < winWidth) {
if (isLeft)
movingblock.style.left = parseInt(movingblock.style.left) - 10 + 'px';
else
movingblock.style.left = parseInt(movingblock.style.left) + 10 + 'px';
} else {
movingblock.style.left = '0px';
}
}
function moveBlockLeft() {
clearInterval(intervalid);
movingblock.style.right = parseInt(movingblock.style.right) + 10 + 'px';
intervalid = setInterval(moveBlockRight, 20);
}
<div id="movingblockobject" style="width:50px;height:50px;border:solid;position: absolute;">
var movingblock = null
this are mistakes you have delclared it as null and next line you are binding click event.Also for assigning click event you should assign the name of the function.
movingblock.onclick = moveBlockLeft;
above is basic bug there are lot like the above.I feel Self learning is much better for basics
try yourself.
try the above it will work but please try yourself
You should CSS3 transition, works like a charm. Just toggle a class "right"
HTML:
<html>
<head>
<style>
#movingblockobject{
width: 40px;
padding: 10px;
position: fixed;
height:10px;
left:0px;
-webkit-transition: left 2s; /* For Safari 3.1 to 6.0 */
transition: left 2s;
}
#movingblockobject.right{
left:200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$( document ).ready(function() {
$('#movingblockobject').on('click', function (e) {
$('#movingblockobject').toggleClass("right");
});
});
</script>
</head>
<body>
<div id="movingblockobject" class="demo">add image here</div>
</body>
</html>
I have the three functions running on my interactive pet (change background, dimmer lights, mouse follow). I'm trying to add an image to the background of the body, but every time I try it gets pushed to the top and the dirty/clean tank function doesn't work. Could someone tell me how to change the color sections of the first function below to switch between images instead of color codes? I think that would solve the immediate problem. :/
CSS Code:
//change background color: dirty/clean tank
setTimeout(function dirty() { //sets background color to murky green
document.body.style.backgroundColor = ****"#CCCC99";** //would like this to be an image**
var btn = document.body.appendChild(document.createElement('button'));
btn.appendChild(document.createTextNode("Clean the tank!"));
document.body.style.marginTop = "-1000px";
btn.onclick = function clean() {
btn.parentNode.removeChild(btn);
document.body.style.backgroundColor = **"#CCFFFF";//would like this to be an image**
setTimeout(dirty,27000); //how long it takes to make the tank dirty
};
},500); //first loading of clear blue timeout
//dim the lights
var dimmed = 0;
function toggleLights()
{
var dimmer = document.getElementById("dimmer");
if(dimmed == 0) dimmed = 1;
else dimmed = 0;
if(dimmed == 1)
{
dimmer.style.opacity = 0.8;
dimmer.style.visibility = "visible";
}
if(dimmed == 0)
{
dimmer.style.opacity = 0.0;
dimmer.style.visibility = "hidden";
}
}
//fish moves on mouse hover
$(document).ready(function() {
$("#swim").mousemove(function (event) {
var fish = $("#fish1");
var position = fish.position();
var mousey = event.pageX;
if (position.left > mousey) {
$("#fish1").html("<img src='images/happy.png' />");
} else {
$("#fish1").html("<img src='images/happyback.png'/>");
}
$("#fish1").stop().animate({
left: event.pageX,
top: event.pageY
}, 300);
});
});
HTML Code:
<HTML>
<HEAD>
<TITLE>Untitled</TITLE>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"
</script>
<script type="text/javascript" src="pet.js"></script>
<script type="text/javascript" src="core.js"></script>
</HEAD>
<div id="table">
<div id="dimmer" onClick="toggleLights()"></div>
<a href="javascript:toggleLights();"><img src="images/table-lamp.png" height="380px"
alt="table lamp"></a>
</div>
<div id="swim">
<div id="fish1"><img src="images/happy.png"/></div>
</div>
</BODY>
</HTML>
Add a starting <body> tag in your HTML, and change element classes with javascript, instead of style properties. That way you have more control over the styling through your CSS file.
So you would do something like:
document.body.className = 'state1';
And in your CSS
.state1{
background-image: url(the/image.jpg);
}
and so on...
I am using the following code and tried many other codes to display images in slide. but all in vain.. no error is in my code but not a single image is displaying on web page.. my code is:
<html>
<head>
<style>
body{
background-color: black;
padding:0;
margin:0;
width:320px;
height:480px;
}
img{
-webkit-transition-property:opacity;
-webkit-transition-duration:3s;
position:absolute;
width:320px;
height:auto;
}
img.fade-out{opacity:0;}
img.fade-in{opacity:1;}
</style>
</head>
<body>
<img src = "Slide1.JPEG";/>
<img src = "Slide2.JPEG";/>
<img src = "Slide3.JPEG";/>
<img src = "Slide4.JPEG";/>
var interval = 4 * 20;
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current =0;
var randomize = funtion() {
return ( Math.round(Math.random() * 3 - 1.5 ));
}
for(var i=0; i<imageCount; i++) {
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);
var fade = function() {
imageArray[current++].className = 'fade-out';
if(current == imageCount) {
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade,interval * 100);
};
fade();
</script>
}
</body>
</html>
Please guide me where is the error.
Thanks
First error:
Yor aur using file type in caps (.JPEG) it should be .jpeg / .jpg
Second error:
You forget to type the <script> tag at the starting of JavaScript code.
Third error:
You are using invalid function keyword (funtion)
var randomize = "funtion"() {
return ( Math.round(Math.random() * 3 - 1.5 ));
}
Now put this code and it should work...
<html>
<head>
<style>
body{
background-color: black;
padding:0;
margin:0;
width:320px;
height:480px;
}
img{
-webkit-transition-property:opacity;
-webkit-transition-duration:3s;
position:absolute;
width:320px;
height:auto;
}
img.fade-out{opacity:0;}
img.fade-in{opacity:1;}
</style>
</head>
<body>
<img src = "Slide1.jpg" />
<img src = "Slide2.jpg" />
<img src = "Slide3.jpg" />
<img src = "Slide4.jpg" />
<script>
var interval = 4 * 20;
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current =0;
var randomize = function(){
return ( Math.round(Math.random() * 3 - 1.5 ));
}
for(var i=0; i<imageCount; i++) {
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);
var fade = function() {
imageArray[current++].className = 'fade-out';
if(current == imageCount) {
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade,interval * 100);
};
fade();
</script>
</body>
</html>