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.
Related
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.
I have an unordered list of image thumbnails. Each thumbnail links to the full size image.
I use the YUI3 library to allow drag & drop reordering of the thumbnail images (just the out-of-the-box example code).
The problem is the link to the fullsize image: it is not draggable. Only the small portions underneath the thumbnail (with title and value) are draggable.
<ul>
<li class="imgcontainer">
<div>
<a href="/image.jpg">
<img src="thumbnail.jpg" border="0" alt="" />
</a>
</div>
<div class="left">Title</div>
<div class="right">$2.00</div>
<div class="clear"></div>
</li>
<!-- ... -->
</ul>
What is the best way to allow users to reorder the images in such an image gallery?
Add a drag handle icons to a corner of the list items?
Create a "reorder mode" in which the link anchors are removed, leaving only draggable images?
Or can it be set up so that the links still can be dragged?
Your problem is that the anchor tag is not a valid drag handle per default. You can change this by using removeInvalid('a') on your drag instance.
var dd1 = new Y.DD.Drag({
node: '#drag1'
});
dd1.removeInvalid('a');
Another option would be to remove the anchor tag
<div class="linked-image">
<img src="http://placekitten.com/50/50" border="0" alt="" />
</div>
and add a click listener to the image.
Y.on('click', function () {
alert('go to url');
}, '.linked-image');
Both approaches are demonstrated here: http://jsfiddle.net/xGQne/
Note that the click event fires after the drag is completed in both cases. You will need to differentiate between clicks and drags to make this work smoothly.
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...
I have a very simple div with an image inside:
<div class="stack4">
<img src="images/002m.jpg" width=200>
</div>
And a very simple Jquery function for when you hover over the image:
$(function () {
$('.stack4>img').hover(function(){
prompt('hello');
});
});
This all works fine. However, I'm trying to add additional content to the page, and so put the following HTML directly after the end of the first div:
<div id="menucontainer" class="menuContainer">
<div id="menu" class="menuContent">
<img src="images/003m.jpg" />
<img src="images/004m.jpg" />
</div>
</div>
After I add this, the jquery prompt no longer works. Why would adding anothing div break my existing javascript command like that?
There has to be a script error in the page that is causing a failure. Or there is a very slight chance that your new html in some way introduces an invisible element that covers your stack4 image. If you can provide a link somebody could debug it for you.
It breaks because the selector no longer matches any elements (because the class selector .stack4 does no longer match any element).
<div id="menucontainer" class="menuContainer">
<div id="menu" class="menuContent">
<img src="images/003m.jpg" />
<img src="images/004m.jpg" />
</div>
</div>
$(function () {
$('.stack4>img').hover(function(){
prompt('hello');
});
});
If you look at your javascript, it will:
match any child image of an element with class name stack4
Add a hover listener to each image
Display a prompt on hover.
IF you look at your updated DOM structure, class stack4 no longer exists. To make it work again, you have to replace this selector with your new equivalent, which would be the div with id=menu and class=menuContent.
Now, depending on your needs, you can target either #menu>img or .menuContent>img. If you go with the first one, the javascript fragment will only work for a single menu, with the id of menu. However, if you choose the second approach, any content with the class menuContent will have this functionality. So I'd go with:
$(function () {
$('.menuContent>img').hover(function(){
prompt('hello');
});
});
If I have two divs, one shown, the other hidden, I want the images in the visible div to load first and only then for the other hidden images to load.
Is there a way to do this?
<div class="shown">
<img src="a.jpg" class="loadfirst">
<img src="b.jpg" class="loadfirst">
<img src="c.jpg" class="loadfirst">
<img src="d.jpg" class="loadfirst">
<img src="e.jpg" class="loadfirst">
</div
<div style="display:none" class="hidden">
<img src="1.jpg" class="loadsecond">
<img src="2.jpg" class="loadsecond">
<img src="3.jpg" class="loadsecond">
<img src="4.jpg" class="loadsecond">
<img src="5.jpg" class="loadsecond">
</div>
The browser should be requesting the images in the order that the markup lists them in. So it would ask for a.jpg, b.jpg, etc.
If you don't want the hidden DIV images to load with the page then you would have to insert that HTML from the client side once you want the images loaded.
As others have said, it all comes down to which images are listed first in the html markup.
But, something that may help with this problem is to display a loading spinner until all of your images are fully loaded.
You could do this with JQuery, as in this example.
http://jqueryfordesigners.com/image-loading/
Some, if not most, browsers do this automatically. If images are hidden then they are not downloaded.
If all the images are embedded within a single image map, then all images will load at the same time. That solves issue of the "literal load order". Thats a bit complicated though and a totally different issue that you might want to skip for now ( http://www.alistapart.com/articles/imagemap/ ).
But, for the "apparent load order" you start with a DIV with <DIV id="1" style="visibility: hidden"> option. Then use a for loop to change the visibility of the DIVs in order.
for (var=0;var<=10;var=var+increment) {
document.getElementById(var).style.visibility = 'visible';
}
Also, maybe an approach using layers: http://jennifermadden.com/javascript/dhtml/showHide.html
I think there are ways to dynamically load an additional CSS file (when you are ready to load images): http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS