How do I have JavaScript telling me the current image name with an ONCLICK event... and I need to do this with alert() for some reasons.
function imgName() {
window.alert()
}
HTML
<figure>
<img src="aster.jpg" alt="aster" onclick="window.alert()">
<figcaption><span>I am aster</span></figcaption>
</figure>
Thanks
Giving an id to image for query from js code.
and just writing:
alert(document.querySelector('#imageId').alt) //supposed alt as name.
Change:
onclick="window.alert()"
to:
onclick="imgName(this)"
and within your imgName function change:
window.alert()
to
alert(foo.src)
where foo is the argument you pass to the function via function imgName(foo)
function imgName(foo) {
alert(foo.src)
}
<figure>
<img src="aster.jpg" alt="aster" onclick="imgName(this)">
<figcaption><span>I am aster</span></figcaption>
</figure>
Or you could just ditch the function and alert the src directly via:
<figure>
<img src="aster.jpg" alt="aster" onclick="alert(this.src)">
<figcaption><span>I am aster</span></figcaption>
</figure>
Please see below -
<html>
<body>
<script language="javascript" >
function imgName() {
var fullPath = document.getElementById("img1").src;
window.alert(fullPath)
}
</script>
<img src="aster.jpg" alt="aster" id="img1" onClick="imgName()">
</form>
</body>
</html>
In "onclick" you are not calling the function "imgName()".
Do this:
<figure>
<img src="aster.jpg" alt="aster" onclick="imgName()">
<figcaption><span>I am aster</span></figcaption>
</figure>
If "current image name" means that you want the alt attribute ("aster"), the code of function need to be this:
function imgName() {
var nameOfPics = document.getElementsByTagName("img")[0].getAttribute("alt");
alert(nameOfPics);
}
The problems is when you click the image, you didn't call the related function.
Change onclick="window.alert()" with the related function to return window alert.
<img src="aster.jpg" alt="aster" onclick="window.alert()">
Change with :
<img src="aster.jpg" alt="aster" onclick="imgName()">
I Hope its can help you, pardon me if this is not the best answer
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/
This is my js:
$(document).ready(function () {
$lrgBanner = $('#panel');
$lrgBanner.detach();
$('#banner img').click(function () {
$lrgBanner.appendTo('#ad').show();
$('#banner').hide();
console.log('banner was clicked');
});
});
$('#close img').click(function () {
$('#banner').show();
$lrgBanner.detach();
console.log('close was clicked');
});
And the HTML:
<div id='ad'>
<div id='banner'>
<img src="img/hp-small.gif" alt="banner advertisement" />
</div>
<div id='panel'>
<div id='background'>
<img src="img/hp-large.gif" alt="" />
</div>
<div id='close'>
<img src="img/btn_close.gif" alt="close" />
</div>
</div>
</div>
The div #background contains an animated gif. I was told that using detach and appendTo would restart the gif content, but it doesn't seem to be working.
I wondered about trying to use a load function (or an unload on the #close img click function.
Does anyone have any advice?
Thanks in advance.
You should reset src attribute of animated gif instead:
SEE DEMO
Note that you shouldn't set variables as global if you don't need to access it from global scope.
$(document).ready(function () {
gifAnimated = $('#background img')[0],
gifSrc = "http://mlkshk.com/r/R245.gif";
$lrgBanner = $('#panel');
$lrgBanner.detach();
$('#banner img').click(function () {
gifAnimated.src = gifSrc;
$lrgBanner.appendTo('#ad').show();
$('#banner').hide();
console.log('banner was clicked');
});
});
$('#close img').click(function () {
$('#banner').show();
$lrgBanner.detach();
gifAnimated.src = "";
console.log('close was clicked');
});
I have this functionality witch i am not sure is the best. It is actually working. I'm asking because i couldn't find any 'copy-paste' solution over the net so i wrote this. There no need to suggest other CSS solutions, i am stuck with the <a href><img>text</a> structure and i am UNABLE to write .css (all this because of back-end coding restrictions/ ' they are overwhelmed : lol ' )
javascript (an easy way to let the client build his own icon set [stuck with .png]) :
$(".list-habiliy").on({
mouseenter: function(){
$('img.icone', this).attr("src",$('img.icone', this).attr("src").replace('.png', '-o.png'));
},
mouseleave: function(){
$('img.icone', this).attr("src",$('img.icone', this).attr("src").replace('-o.png', '.png'));
}
},"a");
html (the list of <a> can come up to 30 elements) :
<div class="list-habiliy">
<img class="icone" src="/path/to/default/icons/icon-24px-icon-name1.png" alt="" width="24" height="24" />Some text1
<img class="icone" src="/path/to/default/icons/icon-24px-icon-name2.png" alt="" width="24" height="24" />Some tex2t
<img class="icone" src="/path/to/default/icons/icon-24px-icon-name3.png" alt="" width="24" height="24" />Some text3
<img class="icone" src="/path/to/default/icons/icon-24px-icon-name4.png" alt="" width="24" height="24" />Some text4
</div>
The goal of the function is to replace the icon <img> from within an <a> by adding/removing '-o' text from image source. I'm wondering, should i use the .each(), the hover() for performance reason ?
jsFiddle :
http://jsfiddle.net/5dpaA/
Is this the best way to do it ?
Thanks for all your advices.
[Finaly]:
Explained by user #Xotic750 [accepted answer] (Instead of wrapping this in jquery we use the event attribute and directly access the elements using javascript, we also don't perform any further jquery searches..)
This was somehow the only optimisation i could make.
thanks to user #codelio [i can't accept 2 answers] for is shortened code writing :
$(".list-habiliy a").on({
mouseenter: function (e) {
var elm=e.delegateTarget.firstChild;
elm.src=elm.src.replace('.png','-o.png');
},
mouseleave: function (e) {
var elm=e.delegateTarget.firstChild;
elm.src=elm.src.replace('-o.png','.png');
}
});
Here is another solution, uses jquery event delegation, so only 1 event handler (well 2, one for mounseenter and one for mouseleave) attached to list-habiliy, if you had multiple such structures then you could attach it to document,body and change the selectors to list-habiliy a,img. Instead of wrapping this in jquery we use the event attribute and directly access the elements using javascript, we also don't perform any further jquery searches as we are now assuming that your html pattern does not deviate from that which you have stated. Still, would be pretty difficult to measure it's improvement as it is a user fired event, but it should be faster than your jquery only methods.
HTML
<div class="list-habiliy">
<img class="icone" src="http://placehold.it/64x64/&text=.png1" alt="" width="64" height="64" />Some text1
<img class="icone" src="http://placehold.it/64x64/&text=.png2" alt="" width="64" height="64" />Some tex2t
<img class="icone" src="http://placehold.it/64x64/&text=.png3" alt="" width="64" height="64" />Some text3
<img class="icone" src="http://placehold.it/64x64/&text=.png4" alt="" width="64" height="64" />Some text4
</div>
Javascript
$(".list-habiliy").on("mouseenter", "a,img", function (evt) {
var target = evt.target;
if (target.nodeName === "IMG") {
target.src = target.src.replace('.png', '-o.png');
} else {
target.firstChild.src = target.firstChild.src.replace('.png', '-o.png');
}
}).on("mouseleave", "a,img", function (evt) {
var target = evt.target;
if (target.nodeName === "IMG") {
target.src = target.src.replace('-o.png', '.png');
} else {
target.firstChild.src = target.firstChild.src.replace('-o.png', '.png');
}
})
On jsfiddle
this will allways find the hovered child which is your img, and it's fast!
$(".list-habiliy a").on({
mouseenter: function (e) {
//faster is not possible!
var elm=e.delegateTarget.firstChild, src=elm.src.replace('.png','-o.png');
elm.src=src;
},
mouseleave: function (e) {
//same a bit jQuery stylish
var elm=e.delegateTarget.firstChild, src=elm.src;
$(elm).attr('src',src.replace('-o.png','.png'));
}
});
sorry there is a shorter one. :)
$(".list-habiliy a").on({
mouseenter: function (e) {
var elm=e.delegateTarget.firstChild;
elm.src=elm.src.replace('.png','-o.png');
},
mouseleave: function (e) {
var elm=e.delegateTarget.firstChild;
elm.src=elm.src.replace('-o.png','.png');
}
});
The way you have it works perfectly, and I couldn't say using .hover() will have any performance benefits and .each() is unnecessary. In fact:
Calling $(selector).hover(handlerInOut) is shorthand for:
$(selector).on("mouseenter mouseleave", handlerInOut);
I would probably store the $('img.icone', this) query in a variable so that it's not doing two queries inside each of the mouseenter / mouseleave functions.
It also increases readability and reduces potential problems should this be cut/pasted onto other areas:
$(".list-habiliy").on({
mouseenter: function () {
var imgIcon = $('img.icone', this);
imgIcon.attr("src", imgIcon.attr("src").replace('.png', '-o.png'));
},
mouseleave: function () {
var imgIcon = $('img.icone', this);
imgIcon.attr("src", imgIcon.attr("src").replace('-o.png', '.png'));
}
}, "a");
JS Fiddle demo: http://jsfiddle.net/5dpaA/3/
Hover is implemented like this (as seen here):
hover: function( fnOver, fnOut ) {
return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}
So no performance here. Avoiding delegation would create a lot of handlers instead.
What you can actually do is add something like this at the end of your html:
<div id="hidden-img">
<img class="icone" src="http://placehold.it/64x64/&text=-o.png1" alt="" width="64" height="64" />
<img class="icone" src="http://placehold.it/64x64/&text=-o.png2" alt="" width="64" height="64" />
<img class="icone" src="http://placehold.it/64x64/&text=-o.png3" alt="" width="64" height="64" />
<img class="icone" src="http://placehold.it/64x64/&text=-o.png4" alt="" width="64" height="64" />
</div>
And add some CSS:
#hidden-img {
margin-left: -9999px;
}
I think it's Opera that won't load images if they're hidden.
I have this code:
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script>
$(function()
{
function animation()
{
$('#img0').attr('src',$('#img1').attr('src')).fadeOut(4000).attr('src',$('#img2').attr('src')).fadeIn(4000).fadeOut(4000).attr('src',$('#img3').attr('src')).fadeIn(4000).fadeOut(4000) ;
animation();
}
});
</script>
<body>
<img id="img0" width="613" height="260" alt="OffLease Only Lot" />
<img src="static/images/home/slides/SLIDERS-mP.jpg" id="img1" width="613" height="260" alt="OffLease Only Lot" hidden="true" />
<img src="static/images/home/slides/slider_usa.jpg" id="img2" width="613" height="260" alt="OffLease Only Lot" hidden="true" />
<img src="static/images/home/slides/SLIDERS-ODOMETER.jpg" id="img3" width="613" height="260" alt="OffLease Only Lot" hidden="true" />
</body>
</html>
i want slide showing the images by changing the source of image and proceed by appearing and disappearing it.
but my code didn't work
why?
how can i fix it?
If you're trying to cycle the three images, do something like this:
function animate1() {
$('#img1').fadeIn(4000, function() {
$('#img1').fadeOut(4000, animate2);
})
}
function animate2() {
// Do the same thing here, and do animate3 too
}
$(function() { $('#img0').fadeOut(4000, animate1) };
I would also take a minute to go over the jQuery fadeOut and fadeIn pages. I don't think they work the way you think they work.
http://api.jquery.com/fadeOut/
http://api.jquery.com/fadeIn/
You have to wait for an animation to finish first like this...
element$.fadeOut(4000, function () {
// Do something when faded out
element$.fadeIn(4000, function () {
// Do something when faded in
});
});