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...
Related
I am trying to find a way to select the first image found within a div and replace the image source. It specifically must be this method as the image doesn't have an ID (complicated to explain).
$('.promo-unit-site-logo-3').find('img:first').attr'('src', 'blank')')';
I have tried using the above code from googling around and clipping something together however I am by way of javascript a novice.
Any help appreciated!
Thanks,
John
see its working. you mistake in code.
var image = $('.promo-unit-site-logo-3').find('img:first').attr('src', 'blank');
console.log(image.attr('src'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="promo-unit-site-logo-3">
<img src="http://placehold.it/280x210" title="first image">
<img src="http://placehold.it/30x20" title="Second image">
</div>
Does anyone know how to keep the text on the image slider?
If the plugins is the solution they should not be heavy it should be easy to understand and implement.
You can add captions under each image using data-captionor in a span after the image.
You can add larger text using the title tag, for example:
<div class="MagicSlideshow">
<img src="example1.jpg" data-caption="Descriptive text can go here." title="Title here"/>
<img src="example2.jpg" data-caption="You can have one or two sets of text, or none at all." title="Another title"/>
<img src="example3.jpg" data-caption="You can also use HTML such as<b>bold</b>,<i>italic</i> and<a href='/magicslideshow/'>links</a>."/>
</div>
Plz refer this one.
Demo
I have an Image in a HTML page. I want to display different information when the mouse is hovering over different areas of that image. For example, I want to display information-1 when the mouse is over point-1 on the image. And when leaving i want the information-1 to hide and when the mouse is hovering over point-2 i want to popup information-2. Is this possible with JS using any kind of library?
Yes It's possible.
You can approach in 2 ways:
Image Maps - Just a link with a tutorial
Use CSS to positionate transparent elements above the image and show some text when one of this is hovered.
I made this pen to show you an example with method 2. With method 1 is kinda the same, you just need to change a little bit the code.
HTML
<div class="img-wrapper">
<img src="http://i.imgur.com/ZY0gdtF.jpg" alt="">
<div class="cloud">
<p>Hey a cloud!</p>
</div>
<div class="tree">
<p>Tree here</p>
</div>
<div class="grass">
<p>Green Grass</p>
</div>
</div>
JS
$('.cloud, .grass, .tree').hover(function(){
$(this).find('p').show();
}, function(){
$(this).find('p').hide();
});
Of course all of this is just a sample.
While the first method allows you to define a shape, the second doesn't.
Using method 1 will let you define more accurate areas, but it can be hard. Method 2 is simplier but less accurate. Your needs, your choice.
Been trying to find a solution to this but usually all methods involve mouse-hovering or mouse-clicking on the image itself rather than a hyperlink to swap the two images - or having to click on 4 separate links to view 4 different images for example.
<div id="aboutus">
<a href="#>More about us...</a>
<img id="introimage" src="images/img1.jpg" style="display:block">
<img id="introimage" src="images/img2.png" style="display:none"/>
</div>
Simply put I would like the 'More About Us' link to swap the display for the images when clicked - or any other method that would let me swap the two images on each click.
As I said in the comments, you should change the IDs so they're unique or make them classes (as I have done in this example).
HTML
<div id="aboutus">
More about us...
<img class="introimage" src="images/img1.jpg" style="display:block">
<img class="introimage" src="images/img2.png" style="display:none"/>
</div>
Javascript
$(function() {
$("a.introimagetoggle").on("click", function(event) {
event.preventDefault();
$("img.introimage").toggle();
});
});
You could mess about checking which image is visible and then setting the display state of each of them according to that, but toggle is simple and will suit this particular instance.
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/