Here in the line where the image team.gif is set, I have set events onmouseout and onmouseover, but both are not working. Image is not changing, when I put mouse over it. Please help me.
<div id="about" style="position:absolute;top:1310px;width:1340px;height:655px;background-color:black;opacity:0.9">
<div style="position:absolute;top:140px;left:630px;border:thin solid #03c1cb;width:2px;height:460px " >
</div>
<img src="mission.gif" alt="mission" style="position:absolute;top:1400px;right:430px" />
<img src="vision.gif" alt="vision" style="position:absolute;top:1570px;right:420px" />
<img src="team.gif" alt="team" style="position:absolute;top:1610px;right:360px;z-index:100" onmouseover="lighton(this)" onmouseout="lightof(this)" />
<img src="3.gif" alt="light" id ="light"style="position:absolute;top:1360px;right:15px" />
</div>
my javascript code is here
<script>
lighton(x)
{
x.src="team1.gif";
}
lightof(x)
{
x.src="team.gif";
}
</script>
In your script you need to add the function keyword.
<script>
function lighton(x)
// ^^^^^^^^
{
x.src="team1.gif";
}
function lightof(x)
//^^^^^^^^
{
x.src="team.gif";
}
</script>
<img src="team.gif" alt="team" style="position:absolute;top:1610px;right:360px;z-index:100" onmouseover="this.src='team1.gif'" onmouseout="this.src='team.gif'" />
Fiddle https://jsfiddle.net/8wx8r9za/
Related
This question already has answers here:
Programmatically change the src of an img tag
(9 answers)
Closed 5 years ago.
function change(ele) {
document.getElementById('info').innerHTML = ele.alt;
document.getElementById('info').style.backgroundImage = "url(ele.src)";
}
<div id='info'>
This will tell you more about the below image
</div>
<div id='container'>
<div>
<img alt="The mini Barbarian" src="img\barbarian-thumb.jpg" class="pics" onmouseover="change(this)">
</div>
</div>
how do i change the background image of div with id info with the image on which the mouse hover that image is in div tag with id conatiner
please see this. Basically you can bind function inline with html. Or you can bind it dynamically. This is very simple solution. If your image path is fixed.
<script type="text/javascript">
function mouseaway(my_image) {
my_image.src = "someimage.jpg";
}
function rollover(my_image) {
my_image.src = "someimage2.jpg";
}
</script>
<img src="someimage3.jpg" onmouseover="rollover(this)" onmouseout="mouseaway(this)" />
Just assign an id to your image tag and change the image src like this.
function mouseOverImage() {
document.getElementById("img").src = "images/foo.png";
}
<img
id="img"
alt="some description/info"
src="images/blue.png"
onmouseover = "mouseOverImage()"
/>
Hope this will help
$(document).ready(function(){
$("img").hover(function(){
$(this).attr('src', 'images/alt/imagename.jpg');
});
});
Try this:
function change(e){
document.getElementById("info").style.backgroundImage = "url('"+e.src+"')";
document.getElementById("info").style.backgroundRepeat="no-repeat";
}
function change2(e){
document.getElementById("info").style.backgroundImage = "";
}
#info{
height:100px;
}
<div id='info'>
This will tell you more about the below image
</div>
<div id='container'>
<div>
<img alt="The mini Barbarian" src = "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1614068cdea%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1614068cdea%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.5%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" class="pics" onmouseover="change(this)" onmouseout="change2(this)">
</div>
</div>
I'm using onerror feature to detect broken links and replace those with an image, the problem is that in my code images that are okay are clickable.
So I want to make it in that way that when the function imageOnError is called to make that image impossible to click.
I tried to do it like this (img).unbind("click");
Lik this also: img.class = "blocked";
but it doesn't work?
<img class="img img-click not-selected " src="" onerror="return imageOnError(this);" />
countImgReplaced = 0;
function imageOnError(img) {
img.onerror = '';
img.src = 'https://dummyimage.com/256x256?text=Broken%20images%20.';
(img).unbind("click");
countImgReplaced ++;
return true;
}
And also I want to get the number of times that the image is replaced I did that with countImgReplaced , but it gives me the total number of images :/
I'm really confused. Can somebody help me?
You can apply pointer-events: none; to them via a class. You can apply that using the classList API
i.e.
img.classList.add('blocked');
You can just do this in HTML tag.
<img src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
$(document).ready(function(){
$("img").click(function(){
alert("Valid");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="clear:both;"><lable>Click in image(Invalid img):</lable>
<img width=200px height=200px src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
</div>
<div style="clear:both;"><lable>Click in image (Valid img):<lable>
<img width=200px height=200px src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQzltPjpuUfCzEsYbhTYTm4xab4wfmCTFoNllbU5ljLLEAb3VvJXkgpWvU" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" /></div>
<script>
$(document).ready(function () {
$("#logo_").hide();
$("#logo_learn").hide();
})
function sl() {
$("#logo_learn").slideToggle(500);
$("#logo_").fadeIn();
}
function hl() {
$("#logo_learn").slideToggle(500);
$("#logo_").fadeOut();
}
</script>
<img id="logo_learn" src="img/logo_learn.png"></img>
<img id="logo" src="img/logo.png" onmouseover="sl()" onmouseout="hl()" ></img>
<img id="logo_" src="img/logo_.png" ></img>
</html>
I have this html such that on hovering on logo.png, logo_ and logo_learn are shown but when i run this on hovering on logo.png, logo_ $ logo_learn blinks.pls post a simple answer.
Use onmouseenter and .stop() like this
HTML
<img id="logo_learn" src="img/logo_learn.png"></img>
<img id="logo" src="img/logo.png" onmouseenter="sl()" onmouseleave="hl()" ></img>
<img id="logo_" src="img/logo_.png" ></img>
jQuery
function sl() {
$("#logo_learn").stop().slideToggle(500);
$("#logo_").stop().fadeIn();
}
function hl() {
$("#logo_learn").stop().slideToggle(500);
$("#logo_").stop().fadeOut();
}
DEMO
Update
What #epascarello said, dont use inline event handlers, use .on() like this code below
$('#logo').on('mouseenter', function () {
$("#logo_learn").stop().slideToggle(500);
$("#logo_").stop().fadeIn();
});
$('#logo').on('mouseleave', function () {
$("#logo_learn").stop().slideToggle(500);
$("#logo_").stop().fadeOut();
});
An update to before, here's what I'm dealing with:
<body>
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<div class="thumb" id="carrotThumb"> <img id="showCarrot" class="imgThumb" src="img/carot.jpg" onClick=setupVeg("showCarrot", "carrotBig") /> </div>
<div class="hidden" id="carrotBig"> <img class="imgBig" src="img/carot.jpg" /> </div>
<div class="thumb" id="brocThumb"> <img id="showBroc" class="imgThumb" src="img/brocoli.jpg" onClick=setupVeg("showBroc", "brocBig") /> </div>
<div class="hidden" id="brocBig"> <img class="imgBig" src="img/brocoli.jpg" /> </div>
</div>
<!-- end thumbs container -->
<script>
var active = "";
function setupVeg(thumbVeg, hiddenVeg) {
$("#" + thumbVeg).click(function() {
if (active != hiddenVeg) {
$("div.hidden").hide("fast");
$("#" + hiddenVeg).show("fast", function() {});
active = hiddenVeg;
}
else {
$("div.hidden").hide("fast");
active="";
}
});
}
$("div.hidden").click(function () {
$("div.hidden").hide("fast");
isAnyBig=false;
});
</script>
</body>
This code is not working unfortunately. I have borrowed from suggested solution below.
Would be nice if it did work!
Any suggestions, most welcome.
I don't think you need any of the flags or the if conditions really. I think your logic is:
toggle carrotBig whenever showCarrot
is clicked.
hide div.hidden whenever showCarrot is clicked.
So all you need is:
$("#showCarrot").click(function () {
$("#carrotBig").toggle("fast");
$("#div.hidden").hide();
});
.toggle will handle one of your flags (isCarrotBig) and .hide() won't do anything if div.hidden is already hidden, so that takes care of your isAnyBig flag.
Now.. let's make that work with broc as well...
function setupVegetable(showId, toggleId) {
$("#" + showId).click(function () {
$("#" + toggleId).toggle("fast");
$("#div.hidden").hide();
});
}
setupVegetable("showCarrot", "carrotBig");
setupVegetable("showBroc", "brocBig");
If you're interested, you can refactor it FURTHER so you don't need to supply the IDs for each of the vegetables. I'll need to see your HTML markup though.
Ok I'll post a new answer in response to the edit.
Points worth noting:
Removed divs surrounding the imgs - they are unnecessary and complicate the relationship between the thumnnails and the large images.
Removed onclick attribute from within HTML - you will be attaching the event handlers in the JS so this is not needed.
Since the relationship between the thumbnails and the large images is quite obvious (the large images is just the next element) you don't need IDs to identify ANY of them. All you need is a class on the thumbnails.
Since we're not using IDs, only classes, you can add as many vegetables as you want without touching the JS
Your code modified:
<body>
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<img class="imgThumb" src="img/carot.jpg" />
<img class="imgBig hidden" src="img/carot.jpg" />
<img class="imgThumb" src="img/brocoli.jpg" />
<img class="imgBig hidden" src="img/brocoli.jpg" />
</div>
<!-- end thumbs container -->
<script>
$("#thumbsContainer .imgThumb").click(function () {
var thisImgBig = $(this).next();
// Hide all imgBigs, except for this one
$("#thumbsContainer .imgBig").not(thisImgBig[0]).hide();
// Toggle this imgBig
thisImgBig.toggle();
});
$("#thumbsContainer .imgBig").click(function () {
// Hide this imgBig
$(this).hide();
});
</script>
</body>
create a function and reuse it....something like:
/**
* document here....
*/
var toggleElements = function() {
// your code here
}
and then
$("#whatever").click(toggleElements);
Personally I would suggest creating a simple jQuery plugin. Something like so:
(function($){
$.fn.big = function(options) {
var defaults = {
target: '#carrotBig',
};
var options = $.extend(defaults, options);
return this.each(function() {
$(this).click(function () {
isBrocBig=false;
if (isCarrotBig == false && isAnyBig == false) {
$(options.target).show("fast", function() {});
isCarrotBig=true;
isAnyBig=true;
}
else if (isCarrotBig == true) {
$(options.target).hide("fast");
isCarrotBig=false;
isAnyBig=false;
}
else if (isCarrotBig == false && isAnyBig == true) {
$("div.hidden").hide("fast");
$(options.target).show("fast", function() {});
isCarrotBig=true;
}
else {
$("div.hidden").hide("fast");
isCarrotBig=false;
isAnyBig=false;
}
});
});
};
})(jQuery);
Then you just call it with something like so:
$("#showCarrot").big({target: '#carrotBig'})
Your next step should be to investigate whether you can get rid of the global variables or not.
Ok I have found a neat(ish) sollution, dependent on each hidden DIV being the .next() one. If it isn't it won't work but should be fine generally though. Hacked!
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<div class="thumb" id="carrotThumb"> <img id="showCarrot" class="imgThumb" src="img/carot.jpg" /> </div>
<div class="hidden" id="carrotBig"> <img class="imgBig" src="img/carot.jpg" /> </div>
<div class="thumb" id="brocThumb"> <img id="showBroc" class="imgThumb" src="img/brocoli.jpg" /> </div>
<div class="hidden" id="brocBig"> <img class="imgBig" src="img/brocoli.jpg" /> </div>
</div>
<!-- end thumbs container -->
<script>
var active = "";
$("div.thumb").click(function() {
var thumbVeg = $(this).attr("id");
var hiddenVeg = $(this).next().attr("id");
setupVeg(thumbVeg, hiddenVeg);
});
function setupVeg(thumbVeg, hiddenVeg) {
if (active != hiddenVeg) {
$("div.hidden").hide("fast");
$("#" + hiddenVeg).show("fast", function() {});
active = hiddenVeg;
}
else {
$("div.hidden").hide("fast");
active="";
}
}
$("div.hidden").click(function () {
$("div.hidden").hide("fast");
});
</script>
I need to scroll the div which contains images, vertically. Any help or references will be highly appreciated.
Maybe something like this would help? First and last images are supposed to be the same.
JS:
(function(){
var box=document.getElementById('box');
box.appendChild(box.firstChild.cloneNode());
function infScroll(){
box.scrollTop +=1;
if(box.scrollTop===300){
box.scrollTop=0;
}
window.requestAnimationFrame(infScroll);
}
window.requestAnimationFrame(infScroll);
}());
HTML:
<div id="box" style="width:150px; height:100px; overflow:hidden;">
<img src="http://placekitten.com/150/90" />
<img src="http://placekitten.com/150/120" />
<img src="http://placekitten.com/150/80" />
<img src="http://placekitten.com/150/90" />
</div>