How do I display an image on mouse over? I also need to underline the text next to the image on mouse over? On mouseout I have to hide the image and make the text normal again.
This is my html field
<img src="img.jpg"> Name
Now when I load the page I want not to display the image unless I have the mouse over the place it should appear.
CSS
#test{
display:none
}
HTML
<img id="test" src="img.jpg"/> <span>Name</span>
jQuery
$(document).ready(function () {
$('span').on('mouseenter', function () {
$('#test').show();
$(this).css({
"text-decoration": "underline"
});
}).on('mouseleave', function () {
$('#test').hide();
$(this).css({
"text-decoration": ''
});
});;
});
DEMO
Documentation
jQuery
document.ready
jquery.on()
jQuery.show()
jQuery.hide()
jQuery.mouseenter
jQuery.mouseleave
You can do it the below way using the hover event.
jQuery:
$(document).ready(function () {
$('span').hover(function(){
$(this).addClass('underline'); //to make text underlined on hover
$('#image').show(); //displays image on mouse in
},function(){
$(this).removeClass('underline'); //remove underline on mouse out
$('#image').hide(); //hides image on mouse out
});
});
HTML:
<img class="hidden" id="image" src="img.jpg"/> <span>Name</span>
CSS:
.hidden{
display: none;
}
.underline{
text-decoration: underline;
}
Working Demo
As answered by Anton, you can use this one as well.
$(document).ready(function () {
$('span').hover(
function () {
alert("1");
$('#test').show();
},
function () {
alert("2");
$('#test').hide();
}
)
});
Jquery:-
$(document).ready(function(){
$("#textDiv").mouseover(function(){
$("#imageDiv").hide();
});
$("#textDiv").mouseout(function(){
$("#imageDiv").show();
});
});
HTML:-
<div id="textImage">
<div id="imageDiv" style="float:left;">
<img src="../images/login_background.png"></img>
</div>
<div id="textDiv"style="float:left;">
Name
</div>
</div>
CSS:-
#textImage a {text-decoration:none;}
#textImage a:hover {text-decoration:underline;}
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Test</title>
<script type='text/javascript' src='http://identify.site88.net/jquery-1.9.1.js'></script>
<style type='text/css'>
#test{
display:none
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function () {
$('span').on('mouseenter', function () {
$('#test').show();
$(this).css({
"text-decoration": "underline"
});
}).on('mouseleave', function () {
$('#test').hide();
$(this).css({
"text-decoration": ''
});
});;
});
});
</script>
</head>
<body>
<img id="test" src="http://www.shop.hidra.com.tr/wp-content/uploads/image_1306_1.jpg"/> <span>Name</span>
</body>
</html>
Related
I want to click a button on my page then another div toggle on and load in that div another page, but it doesn't work.
HTML:
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.min_1.js"></script>
<script>
$(document).ready(function() {
$('#clickme').click(function() {
$('#me').animate({
height: 'toggle'
}, 1000
);
$("#me").load("page2.html")
});
});
</script>
</head>
<body>
<div id="clickme" style="color: #FFFFFF;">
Click here
</div>
<div id="me" style="border:1px solid #000; width:900px; height:300px;">
</div>
</body>
</html>
I believe your function can be simplified to use the normal callback of toggle or slidetoggle
$(function() {
$('#clickme').on("click",function() {
$('#me').toggle(function() {
$(this).load("page2.html");
});
});
});
But you might want to load before toggling:
$(function() {
$('#clickme').on("click",function() {
$('#me').load("page2.html",function() {
$('#me').slideToggle();
});
});
});
I'm newbie in jquery. I use this code for changing the current image on hover or click by another with jquery. But it dosn't work!!
<head>
<title> Visite </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-2.1.1.min.js"> </script>
<script>
$('img').hover(function () {
$(this).attr('src', 'o.184684.jpg');
})
</script>
</head>
<body>
<img src="logo11w.png" alt="photo" />
</body>
</html>
i give this example from http://jsfiddle.net/afzaal_ahmad_zeeshan/8H4MC/
Try wrapping the jQuery code in a document ready
$(document).ready(function() {
$('img').hover(function () {
$(this).attr('src', 'o.184684.jpg');
});
});
Or alternatively
$(function() {
$('img').hover(function () {
$(this).attr('src', 'o.184684.jpg');
});
});
This will only give you the mouse over. You may need to pass in the mouse out function as well: hover
$(function() {
$('img').hover(function () {
$(this).attr('src', 'o.184684.jpg');
}, function() {
//mouse out function
});
});
I am first time JQuery user today. I have managed to figure out how to work it enough to do what I want, which is change the color of the background onhover of button.
Only problem is that there is no fadein effect. I have looked up the fadein function but am not sure how to implement it into what I have done so far because the syntax is very different from what I am used to. Can anyone help me figure out how to add the fadein function to my code?
Thanks! Looking forward to replies! :)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index.html</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bgcolor.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class='splash'>
<div id='logoblock'>
<img src='images/logo.png'>
</div>
<div id='menublock'>
<a href='#' id='jabout'><div id='about'></div></a>
<a href='#' id='jphoto'><div id='photo'></div></a>
<a href='#' id='jinfo' ><div id='info'></div></a>
</div>
<div id='quoteblock'
<p class=quote>"blah blah blah!"</p>
<p class=author>- John Doe</p>
</div>
</div>
</body>
</html>
bgcolor.js
// JavaScript Document
$(document).ready(function(){
$( "#jphoto" ).hover(
function() {
$('body').css('background', '#9dd5fc');
},
function() {
$('body').css('background', '#d4e88f');
}
);
$( "#jabout" ).hover(
function() {
$('body').css('background', '#ffaf3c');
},
function() {
$('body').css('background', '#d4e88f');
}
);
$( "#jinfo" ).hover(
function() {
$('body').css('background', '#ff3c3c');
},
function() {
$('body').css('background', '#d4e88f');
}
);
});
You need to use animate() to have animation effect, also need to have jquery UI/color library for background color animation to work
$("#jinfo").hover(function () {
$('body').animate({
'background-color': '#ff3c3c'
});
}, function () {
$('body').animate({
'background-color': '#d4e88f'
});
});
Demo: Fiddle
I want to show the div with id #flower when clicking on the link with id #button but it doesnt work. Heres is the code i wrote.. i made also a jsbin page to show you
any suggestions?
http://jsbin.com/xefanaji/3/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="front">
<div><p>Button</p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
</body>
</html>
css
#button{
position:relative;
height:30px;
width:60px;
background-color:lightyellow;
left:40px;
top:40px;
}
#flower{
display:none;
position:relative;
top:-600px;
left:50px;
z-index:0;
}
#front {
z-index:1;
position:relative;
top:100px;
height:600px;
width:100%;
background-color:lightblue;
}
if i am not wrong.. you need to add id to your button ,if (<a ..>Button</a>) is the element you are talking about.
<div><p>Button</p></div>
//-^^^^^^^^^^----here
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
with CSS you have, i am sure you forget to add id to that a link
well few more thing,
always load script in your <head> section, and you don't need to add src in script tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
..
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
....
....
<script>
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
Try this
<div id="front">
<div><p><a id="button" href="">Button</a></p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
});
</script>
DEMO
Put the jQuery library in the head section of your document like below
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
If you need button you can use span instead of anchor e.g.
<span class="button">Button</span>
then add a little styling
.button {
font-size: 12px;
color: #333;
}
.button:hover {
color: #ddd;
}
and then put this script just before </body> tag
<script>
$(function() {
$(".button").click(function () {
$("#flower").show("slow");
});
});
</script>
You could use the revised jQuery below to accomplish this, the reason your code isnt working is because your link doesnt have the id button set.
$('#front a:first').on('click',function(e){
e.preventDefault();
$('#flower').show();
})
You are missing id #button for that link.
<a id="button" href="">Button</a>
I have a Bee image and I want to animate it using jQuery.
The idea is to move the image from left (outside of screen) to right (outside of screen) to create an effect like it's flying.
Your bee needs to be absolutely positioned, something like this:
<div id="b" style="position:absolute; top:50px">B</div>
I've used a div here, but it could just as well be an <img> tag. As meo pointed out, don't forget the top attribute, because some browsers don't work without it. Then you can animate it:
$(document).ready(function() {
$("#b").animate({left: "+=500"}, 2000);
$("#b").animate({left: "-=300"}, 1000);
});
Here is a jsfiddle demo.
If you want to have a continuous animation as Hira pointed out, put the animation code in functions, make sure the left and right movement is the same, and use the onComplete option of animate() to call the next animation:
function beeLeft() {
$("#b").animate({left: "-=500"}, 2000, "swing", beeRight);
}
function beeRight() {
$("#b").animate({left: "+=500"}, 2000, "swing", beeLeft);
}
beeRight();
And the fiddle for that.
Try spritely: http://spritely.net/
i would do something like this:
http://jsfiddle.net/Uwuwj/2/
var b = function($b,speed){
var beeWidth = $b.width();
$b.animate({ //animates the bee to the right side of the screen
"left": "100%"
}, speed, function(){ //when finished it goes back to the left side
$b.animate({
"left": 0 - beeWidth + "px"
}, speed, function(){
b($b, speed) //finally it recalls the same function and everything starts again
});
});
};
$(function(){ //document ready
b($("#b"), 5000); //calls the function
});
bee careful, this code only works with bee's :P
In case you want the bee to keep flying across the screen, try this :-)
<html>
<head>
<script type="text/javascript" src="jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function animateImage() {
console.log("Called");
$('#bee').css({right:'10%'});
$('#bee').animate({right: '-100%'}, 5000, 'linear', function(){animateImage();});
}
$(document).ready(function() {
animateImage();
});
</script>
</head>
<body>
<div style="width: 100%;"><img src="bee.jpg" id="bee" style="position:relative;"/></div>
</body>
<script type="text/javascript" src="jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function rgt() {
$('#sldr').animate({ left: "500" }, 10000, hider);
}
rgt();
function hider() {
$('#sldr').css('left', '0px');
rgt();
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="sldr" src="../Images/animated%20images/birds/rightfuglan.gif" style="position:absolute" />
</div>
</form>
</body
>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
var k = $(window).width();
function rgt() {
$('#sldl').hide(1);
$('#sldr').animate({ left: "1000" }, 10000, hider);
}
rgt();
function hider() {
$('#sldr').css('left', '0px');
$('#sldr').hide(1);
$('#sldl').show();
lft();
}
function lft() {
$('#sldl').animate({ left: "0" }, 10000, hidel);
}
function hidel() {
$('#sldl').css('left', '1000px');
$('#sldr').show();
rgt();
}
});
</script>
<style type="text/css">
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="sldl" src="../Images/animated%20images/birds/fuglan.gif" style="position:absolute; right:0px" />
<img id="sldr" src="../Images/animated%20images/birds/rightfuglan.gif" style="position:absolute" />
</div>
</form>
</body>`enter code here`