when I set the content of function to "alert();", It recognizes when I hover the image. When I implement what I wants it do, which is hover another image over the original picture. Nothing happens? If anyone could some guidance I'd appreciate it.
<script type="text/javascript">
function SetNewImage()
{
document.getElementById("thumbnail").src="images/art/thumbs/06010.jpg";
}
function SetOldImage()
{
document.getElementById("thumbnail").src="images/art/thumbs/05030.jpg";
}
</script>
</head>
<body>
<img class="thumbnail" onmouseover="SetNewImage()" onmouseout="SetOldImage()" src="images/art/thumbs/05030.jpg" alt="Death of Marat" class="artThumb"/>
</body>
you use document.getElement by id But id not founfd
<img id="thumbnail" onmouseover="SetNewImage()" onmouseout="SetOldImage()" src="images/art/thumbs/05030.jpg" alt="Death of Marat" class="artThumb"/>
you can try this -
<script type="text/javascript">
function SetNewImage()
{
document.getElementById("thumbnail").src="images/art/thumbs/06010.jpg";
}
function SetOldImage()
{
document.getElementById("thumbnail").src="images/art/thumbs/05030.jpg";
}
</script>
</head>
<body>
<img class="thumbnail" onmouseover="SetNewImage()" onmouseout="SetOldImage()" src="images/art/thumbs/05030.jpg" alt="Death of Marat" class="artThumb"/>
</body>
thumbnail is a class, so you can do something like
<script type="text/javascript">
function SetNewImage()
{
document.querySelector(".thumbnail").src="https://i.ytimg.com/vi/XCpHNOAzLqA/maxresdefault.jpg";
}
function SetOldImage()
{
document.querySelector(".thumbnail").src="https://th.bing.com/th/id/R.31a5d99ff4d1fac186599a7decd1cf85?rik=SpU2aqLepkVuuA&riu=http%3a%2f%2fwww.hickerphoto.com%2fimages%2f1024%2fpictures-f76t7426.jpg&ehk=SWYUsFxxPWF2LYjSRna6Yfukj3Ng60iCBzZ%2b%2buDP7g8%3d&risl=&pid=ImgRaw&r=0";
}
</script>
<img class="thumbnail" onmouseover="SetNewImage()" onmouseout="SetOldImage()" src="https://th.bing.com/th/id/R.31a5d99ff4d1fac186599a7decd1cf85?rik=SpU2aqLepkVuuA&riu=http%3a%2f%2fwww.hickerphoto.com%2fimages%2f1024%2fpictures-f76t7426.jpg&ehk=SWYUsFxxPWF2LYjSRna6Yfukj3Ng60iCBzZ%2b%2buDP7g8%3d&risl=&pid=ImgRaw&r=0" alt="Death of Marat" class="artThumb"/>
try modify class to id, Class in the img and getelementbyid in JS
Related
I have a div with content ie. short-code, images, links etc.
I need my switch to toggle the div container without jquery. I have spend days and would really appreciate some assistance.
I have included the switch code. On off the div must be display.style="none"
html
<img id="switch" onclick="changeImage()" src="http://designplatform.byethost15.com/on.png" width="60" height="150">
JavaScript
<script>
function changeImage()
{
element=document.getElementById('switch');
if (element.src.match("off"))
{
element.src="http://designplatform.byethost15.com/on.png";
}
else
{
element.src="http://designplatform.byethost15.com/off.png";
}
}
</script>
You can accomplish this using jquery.
Add jquery to your html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Take out the onclick=changeImage() function from the <img> element, and add the following jquery(found in the first part of the snippett) into your <script> tags on your html.
$(function () {
$("#switch").click(function () {
if ( $("#switch").val()=="off")
{
$("#switch").attr("src","http://designplatform.byethost15.com/on.png");
$("#switch").val("on");
}
else
{
$("#switch").attr("src","http://designplatform.byethost15.com/off.png");
$("#switch").val("off");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="switch"
src="http://designplatform.byethost15.com/on.png" width="60" height="150">
I saw this post and I tried to replicate the code: Stop a gif animation onload, on mouseover start the activation. I can't seem to get it to work though. My goal is to swap the image with a gif on hover. Does someone know why the image isn't swapping?
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "images/portfolio/form.gif");
},
function() {
$(this).attr("src", "images/portfolio/form.jpg");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="large-12 medium-12 small-12 columns portfolio-pic animated slideInUp">
<div data-content="Project 1" class="image">
<a class="a-block" href="#">
<img id="imgAnimate" src="images/portfolio/form.jpg">
</a>
</div>
</div>
</div>
Here is a live link to my example: http://fosterinnovationculture.com/dcc/index.html
From what your page is saying jQuery is undefined. So either you are trying to execute jquery code before jquery is executed.
I executed this code on your site just to testing things out and it seems to be working
function mousein () {
$(this).attr("src", "images/portfolio/form.gif");
console.log('hello')
}
function mouseout () {
$(this).attr("src", "images/portfolio/form.jpg");
}
console.log($('#imgAnimate').hover(mousein, mouseout));
I did notice though that because of some styling issues the hover was never actually hitting the img it was actually hitting the .image:after css psuedo selector so you need to reorganize your html or change the way you select the element you want to switch the src of.
just to test in your html move the image outside of
<div class="image">image</div>
Yes its correct as told by #madalin ivascu, you need to add jquery at header and it will work.
Like this,
HTML
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "banana.gif");
},
function() {
$(this).attr("src", "banana.png");
});
});
</script>
</head>
<body>
/* include your html part here */
<a class="a-block" href="#">
<img id="imgAnimate" src="banana.png" alt="">
</a>
</body>
Try this, Instead of using hover, try that using mouseenter and mouseleave.
$(document).ready(function(){
$(".row").find('img').mouseenter(function(){
if($("#imgAnimate").attr('src','form.jpg')){
$("#imgAnimate").attr('src','form.gif');
}
$(this).mouseleave(function(){
if($("#imgAnimate").attr('src','form.gif')){
$("#imgAnimate").attr('src','form.jpg');
}
});
});
});
I want to blur my images by clicking on it. I am using javascript on click event for this purpose. But it is not working exactly as I want. My code is given below:
<script>
$(document).ready(function(){
$(".ww").click(function(){
$(this).css("opacity","0.2");
});
});
</script>
<div class="bg">
<div class="img ww1"><center><img src="img.jpg" /></center></div>
<div class="canname"><center>GHULAM MUSTAFA</center></div>
<div class="partyname"><center>JATOI <span style="color:#CCC;">NPP</span></center></div>
</div>
<div class="bg">
<div class="img ww2"><center><img src="img.jpg" /></center></div>
<div class="canname"><center>GHULAM MUSTAFA</center></div>
<div class="partyname"><center>JATOI <span style="color:#CCC;">NPP</span></center></div>
</div>
I want that when I click first image then its opacity would set. And that when I click second image so the opacity of first image would finish and second image would set.
As the others already tried to explain, you have to use a selector which actually selects both elements, since you want to bind the event handler to both of them. $('.ww') does not select any element in the code you posted.
Toggling the opacity can be easier done when using a class:
.selected {
opacity: 0.2;
}
Add the class to the clicked element and removed it from the element currently having the class:
$(".img").click(function(){
$('.img.selected').add(this).toggleClass('selected');
});
Have a look at this DEMO. This should give you enough information to apply it to your situation.
Because a selector .ww does not match ww1 and ww2.
You can see that with
console.log($(".ww").length);
Use the common class img or add the class ww.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#my').toggle(
function(event) {
$(event.target).css('opacity',0.4);
},
function(event) {
$(event.target).css('opacity',1.0);
}
);
});
</script>
</head>
<body>
<body>
<div id="my">asdf</div>
</body>
</html>
I'm pretty new to jQuery and I am practicing a fade in that starts with one image and then continues to the next image and so on. I have written a piece of code (below) but was wondering if there was an easier or more elegant way to write it? I tried the each() function but didn't seem to work:
<script type="text/javascript" src="jquery/jquery-1.8.2 .min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//alert($("div img").length);
$("div img").css("display","none");
var delayAmt=0;
for(var x=0;x<$("div img").length;x++){
$("div img:eq("+x+")").delay(delayAmt).fadeIn(1000);
delayAmt+=250;
}
});
</script>
</head>
<body>
<h1>Ripple fade in.</h1>
<div>
<img src="images/hot.jpg" id="target0">
<img src="images/hot.jpg" id="target1">
</div>
</body>
</html>
HTML:
<body>
<h1>Ripple fade in.</h1>
<div id="images">
<img src="images/hot.jpg" id="target0">
<img src="images/hot.jpg" id="target1">
</div>
</body>
</html>
jQuery:
$(document).ready(function(){
var delay=0;
$('#images').children('img').each(function () {
$(this).css("display","none");
$(this).delay(delay).fadeIn(1800);
delay += 1000;
});
});
jsFiddle link here: http://jsfiddle.net/salih0vicX/6GZt6/
I want to change container's property by clicking on an image.
Why this doesn't work:
<script type="text/javascript">
function changeMargin(){
document.getElementById("container").style.margin.top="100px";
}
</script>
<div id="container">
<img id="btnRight" src="img/btnRight.png" onclick="changeMargin()">
</div>
It should be
.marginTop="100px";
Full code:
function changeMargin() {
document.getElementById("container").style.marginTop = "100px";
}
Change:
document.getElementById("container").style.margin.top="100px";
To:
document.getElementById("container").style.marginTop="100px";