What's the correct way to change an image on mouseover and back on mouseout (with/without jQuery)?
<a href="#" id="name">
<img title="Hello" src="/ico/view.png" onmouseover="$(this).attr('src','/ico/view.hover.png')" />
</a>
Ok, this is working, but how to change back to the original image after mouseout?
If it is possible, I want to do this thing inline, without document.ready function.
here's a native javascript inline code to change image onmouseover & onmouseout:
<a href="#" id="name">
<img title="Hello" src="/ico/view.png" onmouseover="this.src='/ico/view.hover.png'" onmouseout="this.src='/ico/view.png'" />
</a>
Try something like this:
HTML:
<img src='/folder/image1.jpg' id='imageid'/>
jQuery:
$('#imageid').hover(function() {
$(this).attr('src', '/folder/image2.jpg');
}, function() {
$(this).attr('src', '/folder/image1.jpg');
});
DEMO
EDIT: (After OP HTML posted)
HTML:
<a href="#" id="name">
<img title="Hello" src="/ico/view.png"/>
</a>
jQuery:
$('#name img').hover(function() {
$(this).attr('src', '/ico/view1.png');
}, function() {
$(this).attr('src', '/ico/view.png');
});
DEMO
Thy to put a dot or two before the /
('src','./ico/view.hover.png')"
Here is an example:
HTML code:
<img id="myImg" src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"/>
JavaScript code:
$(document).ready(function() {
$( "#myImg" ).mouseover(function(){
$(this).attr("src", "http://www.jqueryui.com/images/logo.gif");
});
$( "#myImg" ).mouseout(function(){
$(this).attr("src", "http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif");
});
});
Edit: Sorry, your code was a bit strange. Now I understood what you were doing. ;)
The hover method is better, of course.
jQuery has .mouseover() and .html(). You can tie the mouseover event to a function:
Hides the current image.
Replaces the current html image with the one you want to toggle.
Shows the div that you hid.
The same thing can be done when you get the mouseover event indicating that the cursor is no longer hanging over the div.
You can do that just using CSS.
You'll need to place another tag inside the <a> and then you can change the CSS background-image attribute on a:hover.
i.e.
HTML:
<a href="#" id="name">
<span> </span>
</a>
CSS:
a#name span{
background-image:url(image/path);
}
a#name:hover span{
background-image:url(another/image/path);
}
<a href="" onMouseOver="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/ask-icon.png';" onMouseOut="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png';">
<img src="http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png" name="MyImage">
Demo
http://jsfiddle.net/W6zs5/
I know someone answered this the same way, but I made my own research, and I wrote this before to see that answer. So: I was looking for something simple with inline JavaScript, with just on the img, without "wrapping" it into the a tag (so instead of the document.MyImage, I used this.src)
<img
onMouseOver="this.src='ico/view.hover.png';"
onMouseOut="this.src='ico/view.png';"
src="ico/view.png" alt="hover effect" />
It works on all currently updated browsers; IE 11 (and I also tested it in the Developer Tools of IE from IE5 and above), Chrome, Firefox, Opera, Edge.
Related
So I have a list of icons, I'm trying to get a popover to activate when you hover over an icon, I can't seem to get it to work, any help would be appreciated.
<img class="icon" rel="popover" trigger: "hover" data-placement="top" data content="This is a popover"src="images/brandable.png"><br>Brandable</br></li>
And i have this in a separate js file
$('.icon').popover({placement:'top'});
Put attributes in jquery variable instead of tag
<img class="icon" rel="popover" src="images/brandable.png"/>
Add script as following
<script>
$('document').ready(function() {
var popOverSettings = {
placement: 'top',
selector: '.icon',
title:'Brandable',
trigger: "hover",
content:'This is a popover'
};
$(this).popover(popOverSettings);
});
</script>
this is over a year late, but i found this to work:
Fiddler Link
using this JS:
$(function(){
$('[data-toggle=popover]').popover({
trigger: 'focus',
html: true,
title: 'Toolbox'
})
});
And this html:
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS-eTmHxgicEfq4K-sEz_X52cq56uBP2l8cr_q8ivOavSIca5TYtQ"
data-toggle="popover" tabindex="50" data-content="test <b>text</b>" data-placement="right"/>
You need to allow the image to accept focus with the tabindex property. That was the key for me. Remove the "trigger: 'focus' line if you want the popover to stay open on click events...
Hope it helps!
For your code you have:
<img class="icon" rel="popover" trigger: "hover" data-placement="top" data content="This is a popover"src="images/brandable.png"><br>Brandable</br></li>
trigger: "hover" isn't valid html. Bootstrap help document notes, "Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation=""."
So instead you would want to include data-trigger="hover" also looks like your missing a space before src=.
Also you have placement top in the html and also in the javascript. You only need to declare in one place. So you can delete data-placement="top" from the img tag, or in your javascript you can remove it so it would just be $('.icon').popover({placement:'top'});
Also you have "$" in front of your function. Depending on where that code is located you may have a jquery conflict. To note for sure you'll need to post whichever error you are seeing in your error log. If you use chrome right click > web inspect > click the red x at the bottom and copy any errors you see in there.
$(function(){
$('#poper').popover({
html: true,
trigger:'focus',
content: $('#pop')
});
}
);
Perhaps the easiest way to do this uses the OnMouseOver and OnMouseOut events described in this answer: https://stackoverflow.com/a/10709196/121737
I would prefer to do this using one image, the same width as a normal icon but twice the height. This image would show two icons, one above the other, the upper one being the normal icon, the lower being the rolled over icon:
img.icon {
display: block;
width: 4ex; height: 4ex;
background-size: 4ex 8ex;
background-position: 0 0;
}
img.icon:hover {
background-position: 0 -4ex;
}
img.icon#twitter {
background-image:url('icons/twitter.jpg');
}
img.icon#facebook {
background-image:url('icons/facebook.jpg');
}
After this declaring the icons in HTML is much cleaner:
<img class="icon" id="twitter" />
<img class="icon" id="facebook" />
<img class="icon" style="background-image:url('icons/other_icon.jpg')" />
To have an image which acts as a javascript trigger there are quite a few options:
(EDIT: using inline css & javascript for simplifying the question)
Image in anchor tag:
<img src="pic.jpg" />
Img tag with properties:
<img style="cursor:pointer" onclick="myFunc();" />
Anchor tag with properties:
Possibly others as well. Is there a (convention|best practice|widely accepted|fail safe) way to go on with this?
I want a small image to act as a button to run certain Javascript or AJAX.
BTW, I've seen this but it's not what I'm looking for, he talks about header elements, not links.
Related: Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
There is no convention on how to use onclick event.
But you should not use inline javascript. As we are in 2012 and a lot of javascript frameworks make your life easier.
Best for you if you move to a javascript library (eg jQuery):
<img src="pic.jpg" id="myPicture" />
<script type="text/javascript">
$(document).ready(function(){
$('#myPicture').on('click', function(){
alert('image clicked');
});
});
</script>
or plain javascript:
<img src="pic.jpg" id="myPicture" />
<script type="text/javascript">
window.onload = function(){
document.getElementById('myPicture').onclick = function(){
alert('image clicked');
};
};
</script>
If I were you I'd stick with your first choice with a few changes
<img src="pic.jpg" border="0" />
Reasons for this are as follows
href="#" still allows clickthrough if your myFunc fails
javascript:void(0) doesn't allow clickthrough
javascript:void(0) is cross-browser
javascript:void(0) still allows basic implied anchor tag behaviour
attribute/properties on the image tag will be recognised by most browsers but some older versions of IE may not like it
if you want to use a background image that's upto you, but it'll mean additional CSS to control height/width
Additionally, if you use jQuery or some other library, then I'd recommend doing it via
$(document).on('ready, function() {
$('#myAnchorId').on('click', myFunc);
});
Instead of doing via HTML props... just in case the user has JavaScript turned off
If you only going to use the image as an trigger, use the second option...
If you're going to use some more for the same thing, you can use an span to...
<span onclick="myFunc();" >
<img src="pic.jpg" style="cursor:pointer" />
if you click the image, or this text, the javascript function will be triggerd....
</span>
Maybe with jQuery ? Your HTML :
<img id="pic" src="pic.jpg" />
With this jQuery :
$('#pic').click(function() {
// Your stuff here
});
And this CSS :
#pic {
cursor: pointer;
}
Inline css and js are never the best way. :)
Use a class to identify your trigger object (be it an anchor or an image) and then perform click handling on that object:
Say the class name is "clickTrigger", then your HTML:
or
<img src="pic.jpg" />
or
<img style="cursor:pointer" class="clickTrigger" />
Then with javascript/jQuery attach to the click event:
Javascript:
var element = this.getElementsByClassName('clickTrigger')[0];
element.onclick = function (event) {
// handler
}
jQuery:
$('.clickTrigger').click(function (event) {
// Handler
});
I have an image tag enclosed in an anchor element like this:
<a href='$image'><img alt='No Image' src='$image'></a>
I find that if the image is absent, I can still click on the link. I want to disable the link if the image is absent. What is the best way to do this?
Update:
I have tried mplungjan's solution below but it didn't work. I am willing to try jquery if javascript can't do the job.
This version works:
<a href='$image'>
<img alt='No Image' src='$image' onError="this.parentNode.onclick=function() {return(false);}">
</a>
You can see it in action here: http://jsfiddle.net/jfriend00/2jb4G/
Or, using a common function that you can use in multiple places:
<script>
function blockParentLink() {
this.parentNode.onclick = function() {return(false);}
}
</script>
<a href='$image'>
<img alt='No Image' src='$image' onError="blockParentLink()">
</a>
Personally, I think it might just make sense to hide it if it doesn't display rather than block clicks:
<a href='$image'>
<img alt='No Image' src='$image' onError="this.parentNode.style.display = 'none';">
</a>
You can see the hide version here: http://jsfiddle.net/jfriend00/KVUUM/
Disable=true did not work for me
These did (using parentNode ! )
InnerHTML and onclick:
<a href='#'><img alt='No Image' src='$image'
onError="this.parentNode.onclick=function(){return false};
this.parentNode.innerHTML='Image not available'"></a>
Or remove it:
<a href='$image'><img alt='No Image' src='$image'
onError="var lnk= this.parentNode; lnk.parentNode.removeChild(lnk)"></a>
Or replace it:
<a href='$image'><img alt='No Image' src='$image'
onError="var lnk= this.parentNode;
lnk.parentNode.replaceChild(document.createTextNode('No image'), lnk)"></a>
DEMO
This is a small piece of code I found that may be useful to you
<img src="http://www.someurl.com/image.gif" height="100" width="100" onerror="alert('Image missing')">
instead of ALERT you can call a jquery function to remove the hyperlink. Do let me know if you need help with the Jquery function!
I have tried this several different ways but can't seem to figure out how to toggle the span's class from "die2" to "die3" along with the toggle of the div's display style from 'block' to 'none'. Anybody have any solutions? (Basically when the page loads, this ad will be displayed and when you click the red x (die2) the add disappears and the red x should change to a green check box (die3). Here's the code that does work for the div toggle that I'm using.
<div id="mydiv" style="display:block">
<img src='http://www.test.com/mypopad.png' alt='' />
</div>
<span id="myspan" class="die2"><!-- --></span>
Thanks guys, I think I got it going now ... I added another class to the stylsheet and then just reused what JKing answered. I could get the divHide to work but it would just add the class and remove the class. So I decided to just add a divShow and use the same code for the span. Thanks guys!
<div id="mydiv" class="divShow">
<img src='http://www.northpointemobilehomesales.com/wp-content/gallery/support-images/big-daves-sidebar-ad_03.png' alt='' />
</div>
<a href="javascript:;" onmousedown="document.getElementById('mydiv').classList.toggle('divHide');document.getElementById('mydiv').classList.toggle('divShow');document.getElementById('myspan').classList.toggle('die2');document.getElementById('myspan').classList.toggle('die3');">
<span id="myspan" class="die2"><!-- --></span>
</a>
Since the above did not work in IE I Used Sven's code and got it to work, we were missing the # when we called the #mydiv...
<script type="text/javascript">
$("document").ready(function(){
$("#myspan").click(function(){
$(this).toggleClass("die2").toggleClass("die3");
$("#mydiv").toggle();
});
});
</script>
<div id="mydiv" class="">
<img src='http://www.northpointemobilehomesales.com/wp-content/gallery/support-images/big-daves-sidebar-ad_03.png' alt='' />
</div>
<a href="#">
<span id="myspan" class="die2"><!-- --></span>
</a>
I'll work with this code for a bit and see if it will suite my needs. :) Thanks guys!
<script type="text/javascript">
$("document").ready(function(){
$("#myspan").click(function(){
$(this).toggleClass("die2").toggleClass("die3");
$("#mydiv").toggle();
});
});
</script>
That's it
You don't need jQuery, though you might like it. All you need to do is use an element's classList object.
You can do a lot of cool things with classList:
el.classList.add("myClassName") //adds class (does nothing if el already has that class)
el.classList.remove("myClassName") //removes class (does nothing if el doesn't have that class)
el.classList.toggle("myClassName") //toggles class
el.classList.contains("myClassName") //returns true if el has that class, false if not.
Here's a modified version of your code, as an example of what you could do - though I'm not sure it's exactly what you want to do, but it should point you in the right direction.
<div id="mydiv" class="divHide">
<img src='http://www.test.com/mypopad.png' alt='' />
</div>
<a href="javascript:;" onmousedown="document.getElementById('mydiv').classList.toggle('divHide');document.getElementById('myspan').classList.toggle('die2');document.getElementById('myspan').classList.toggle('die3');">
<span id="myspan" class="die2"><!-- --></span>
</a>
(I'm toggling a class on the div as well to show/hide it, instead of your if/else checking of the style attribute.)
I sugest jQuery:
mydiv.toggle() or mydiv.removeClass("die2").addClass("die3")
Hi I would like to slide an element out when the mouse goes over and then slide it back and hide when the mouse goes out..I have this code, but I have problem when the mouse leave the element before the first mouseenter function is completed..The .entry_extend div stay visible. I tried to the hover function, but is the same problem..Please help..Thanks.
jQuery("document").ready(function(){
jQuery(".fire").mouseenter(function(){
jQuery(this).children('.entry_extend').stop(true, false).show('slide',null,500,null);
});
jQuery(".fire").mouseleave(function(){
jQuery(this).children('.entry_extend').stop(true, false).hide('slide',null,500,null);
});
});
<div id="craft" class="fire">
<div class="entry_main">
<a href="" title="">
<img src="" alt="" />
</a>
</div>
<div id="entry_ex_craft" class="entry_extend">
original shisha pipe collection
</div>
</div>
Please Help:)
You are trying to implement a "hover". This works:
jQuery(".fire").hover(
function(){jQuery('.entry_extend', this).stop(true, true).show(500);}
,
function(){jQuery('.entry_extend', this).stop(true, true).hide(500);}
);
Mind you, it isn't a good idea to have the DIV you are sliding in and out within the DIV you are hovering on, since HIDING the DIV alters the boundaries of the DIV containing it. You can end up with some "trembling" activity sometimes because of this.
try combining mouseover+mouseenter and mouseout+mouseleave using binding.. see here:
jQuery("document").ready(function(){
jQuery(".fire").bind('mouseover mousenter',function(){
jQuery(this).children('.entry_extend').stop(true, false).show('slide',null,500,null);
});
jQuery(".fire").bind('mouseout mouseleave',function(){
jQuery(this).children('.entry_extend').stop(true, false).hide('slide',null,500,null);
});
});