I'm trying to mouse over a few images then the images will resize but somehow let's say I have three images. if my mouse is over the first image then all three will resize if I mouse over the third then second then first then it'll resize one by one instead of resizing all three at once. I just started javascript so don't know too much yet.
Is this how it works unless I know more advanced way of doing it?
Also I want to make it so when my mouse is out the images will go back to default but I'm not sure how I should do that....
This is what I have...
<script>
var div1Images=document.getElementById("div1").getElementsByTagName("img");
for(i=0;i<div1Images.length;i++)
{
div1Images[i].onmouseover=function()
{
this.style.width="100px";
}
}
</script>
<body>
<div id="div1">
<img src="cat.jpg" id="im1"/>
<img src="dog.jpg" id="im2"/>
<img src="fish.jpg" id="im3"/>
</div><!--close div1-->
</body>
Thanks in advance.
You can do this with CSS:
<img class="mypic" src="cat.jpg" id="im1"/>
.myPic:hover {
width:100px;
}
Related
I have three images 1.jpg,2.jpg,3.jpg & <img id="add" src="1.jpg"></img> the width , Height & position of this image is set as required & working fine. I have applied JQUERY fade property to toggle between the above images & its also working fine.
But I want precisely that the images change in sliding fashion, i.e. 1.jpg slides left and vanishes and drags in 2.jpg in its position & so on continues in specific interval.
Hope I am clear...
Regards.
Yhank You everyone for your efforts, But , I configured it myself... Here is how it worked:
index.html:
<html>
<head>
<script src="jquery.js"></script>
<script src="slide.js"></script>
</head>
<body>
<div >
<img id="pic1" src="1.jpg"style="width:0px;height:120px;"/><img id="pic2" src="2.jpg" style="width:160px;height:120px;"/>
</div>
</body>
</html>
slide.js
$("document").ready(function(){
var img_l=$("#pic1");
var img_r=$("#pic2");
setInterval(function(){
img_l.animate({width:'160px'},1000);; //animating the image t colapse
img_r.animate({width:'0px'},1000);; //animating the image t expand
var temp_var=img_l; //swaping values to revert previous action
img_l=img_r;
img_r=temp_var;
},3000); //repeating the effect every 3 seconds
});
This is doing well with my requirements and has exactly same behaviour within all leading browsers...
Thanks.
I am trying to locate javascript code that, when I rollover an image, will make a box appear below the image and expand down (much like how a movie screen in a theater would roll from the ceiling to the floor). In that box, content would also appear, that I have previously added, that describes the image above. Already existing underneath the image I have a div with content in it...I would also like this div to be pushed down as the box described above expands down.
Any suggestions?
Thank you very much in advance!
C*
Forgot the code that I am using...so what is happening here is that I have a picture, and below it, a small box, that when I rollover that small box it changes color. So, I want to add, when I scroll over that small box, not only does it still change color, but the new vertical expanding box appears below it. I have javascript in a *.js file that handles the already existing rollover effect but it's quite long and I wasn't sure if I should add that (it was create by Dreamweaver when I created a rollover image).
<div class="images">
<figure class="images">
<img src="../images/Flower2.jpg" width="300" height="199" alt="Life">
</figure>
<figcaption class="content"><a class="typeB" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../graphics/life2.jpg',4)"><img src="../graphics/life1.jpg" width="300" height="25" id="Image3" /></a>
</figcaption>
</div>
You don't give much information in your question about your current setup, but assuming that you have your HTML set out something like this:
<div>
<img id="tux" src="http://upload.wikimedia.org/wikipedia/commons/1/1c/Crystal_128_penguin.png" />
<div id="tux_desc" class="imgDesc" style="display: none">
<p>A cute penguin!</p>
</div>
</div>
<div>
<p>This text is part of the normal document flow</p>
</div>
Then you can use the following JavaScript (which makes use of jQuery):
$('#tux').hover(
function() {
$('#tux_desc').slideDown();
},
function() {
$('#tux_desc').slideUp();
});
You can see it working here: http://jsfiddle.net/wbAxm/1
something like this ought to to do it as long as the div to expand is directly after the image in the mark-up:
$(".class_for_images").on("mouseenter mouseleave", function() {
var content = $(this).next();
if (content.is(":visible")) {
content.slideUp();
} else {
content.slideDown();
}
});
If you want more than this, or it doesn't work, you'll need to post some code so that we can provide more detailed answers...
So I'm trying to have an effect that when you click on an image, two more images (stored in #sharebar) will slide out from the left. The issue is currently when the images slide out, they slide from the left under the button, and then shift up after the animation is complete. I would like everything to be on the same level the whole time, so that the images appear to slide out from behind.
Can anyone help me out? Here's what I have:
<script>
$(function() {
// run the currently selected effect
function slideOut() {
var options = {};
$("#sharebar").toggle("slide", options, 500, callback() );
};
function callback() {
};
// set effect from select menu value
$( "#download_link" ).click(function() {
slideOut();
return false;
});
$("#sharebar").hide();
});
</script>
</head>
<body>
<div style="margin:200px;min-height:10px;background:#e9e9e9;overflow:hidden;">
<img id="download_link" src="Download.png" style="z-index:2;"/>
<span id="sharebar" style="width:20px;z-index:1;">
<img id="exercise_link" src="exercises.png" />
<img id="subtitles_link" src="subtitles.png" />
</span>
Thanks in advance! :)
EDIT: I think this may have to do with z-index, but I'm not quite sure
I would definitely say z-index is going to be the way to go. It looks like you have some z-index things set already; just fix your z-index so the images layer on top of each other like you want them to.
<img id="download_link" src="Download.png" style="z-index:2;"/>
<span id="sharebar" style="width:20px;z-index:0;">
<img id="exercise_link" src="exercises.png" style="z-index:1" />
<img id="subtitles_link" src="subtitles.png" style="z-index:1" />
Just as a side-note: You're better off sticking these style attributes in a CSS document, rather than putting them in your HTML markup.
Setting the "top" element to have style="position:fixed" fixed the problem!
EDIT: Haha not sure why there's a downvote, it ended up fixing the problem.... :P
So I'm designing a website (using WordPress), and I want to use JQuery to hide/show a certain element when another element is moused over. The HTML looks roughly like this
<div class="post" style="clear:both;">
<a href="...">
<img src="..." />
</a>
<div class="autohide">
<h3>
...
</h3>
<p>....</p>
</div>
</div>
...
<div class="spacer" />
and the JQuery looks like this:
jQuery(document).ready(function(){
jQuery(".post .autohide").hide();`
jQuery(".post").hover(function() {
jQuery(this).nextAll(".spacer").first().stop().html(jQuery(this).children(".autohide")
.html()).fadeIn();
},function() {
jQuery(this).nextAll(".spacer").stop().show().fadeOut().html("").hide();
});
});
What's supposed to happen is, when the user mouses over the image, the contents of the associated autohide <div> get transplanted into the next spacer <div> and then faded in; when they mouse out, the autohide <div> fades out and clears.
However, if the pointer is not over the image for the full fade-in time, then the max opacity of the spacer div seems to decrease until a mouse-over creates no effect at all.
I would be much obliged if anyone who knows more JQuery than I could shed some light on this subject; I assume it's a basic problem (I've never used JQuery before this project).
Thanks in advance.
I took the .stop() calls out, and it seems to work fine, but I am still trying to parse everything that is going on.
http://jsfiddle.net/f3EJ3/
Observe the following painfully simple construction:
<div id="home_thumbnails">
<img onClick='loadFeature(0);' src='image_1.jpg'>
<img onClick='loadFeature(1);' src='image_2.jpg'>
<img onClick='loadFeature(2);' src='image_3.jpg'>
<img onClick='loadFeature(3);' src='image_4.jpg'>
<img onClick='loadFeature(4);' src='image_5.jpg'>
</div>
In firefox, this does exactly as advertised.
In Chrome, however, loadFeature doesn't get called for the first two images. I have an alert() at the top of function loadFeature() that demonstrates that the function isn't even called by the first two. The remaining three, however, call it just great.
Any explanation for this would be MUCH appreciated
Here is a recreation of what could be happening.
There's probably a transparent div or image covering up the first two images.
For example, take this innocuous looking code:
<html><body>
<script type="text/javascript">
function loadFeature(number)
{
alert(number);
}
</script>
<div id="important"></div>
<div id="home_thumbnails">
<img onClick='loadFeature(0);' src='image1.jpg'>
<img onClick='loadFeature(1);' src='image2.jpg'>
<img onClick='loadFeature(2);' src='image3.jpg'>
<img onClick='loadFeature(3);' src='image4.jpg'>
<img onClick='loadFeature(4);' src='image5.jpg'>
</div>
</body></html>
Combine the above code with images of width X and height Y and the following CSS:
#important {
width:2Xpx;
height:Ypx;
position:absolute;
top:0;
left:0; }
and your first two image are not clickable.
I just tested this in Chrome, and it works without a hitch:
<script type="text/javascript">
function loadFeature(number)
{
alert(number);
}
</script>
<div id="home_thumbnails">
<img onClick='loadFeature(0);' src='image_1.jpg'>
<img onClick='loadFeature(1);' src='image_2.jpg'>
<img onClick='loadFeature(2);' src='image_3.jpg'>
<img onClick='loadFeature(3);' src='image_4.jpg'>
<img onClick='loadFeature(4);' src='image_5.jpg'>
</div>
You might want to make sure that nothing might be removing or replacing your onClick events, or that no hidden/invisible elements are hiding/covering part of your div/images. If that's not the case, could you post some more of your code (such as your loadFeature function)?
This might be odd, but check for any other elements overlapping with first two images.
Maybe you are actually clicking on that element, instead of your images, so the onclick event won't fire on img elements.