place png overlay image on mouseover on textlink - javascript

I have a normale jpg-photo and 2 textlink. When the user mouseover textlink 1 I would like to show a transparent png-photo on top of the jpg-photo, and when the user mouseover textlink 2, I would like to show another png-photo on top of the jpg. On mouseout the png should disappear again.
Possible? And can it be done with CSS alone or do I need javascript to?
Thanks in advanced.

Yes it is possible with JQuery, JS or CSS, depending on your requirements.
Good script to use is here:
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

You can use hover CSS selector to solve such kind of problems depending upon html layout of your page
#11:hover img {
display:inline:
Add other blocks
}

Your request can be done easily using the power of jQuery :)
I made something using jQuery and you can find it here
http://jsfiddle.net/xrmqq/
It is close to what you want to do.

Related

When I Mouse Hover Into An Image That Image Displays Into Another Div Or Table Colums?

I want to an image gallery. On the left side all thumbnails are there. When i mouse hover into thumbnail, the full image will be displayed into the left side div or table. So please tell me the correct code or plugin or anything.
The image gallery exactly looks http://www.rakindia.com/products.aspx?subcat=SW-0000702
Please friends i am trying from 2 days i can't find any plugin and code. Please help me
(i AM TRYING FOR MULTIPLE IMAGES)
I would do it inline to save overhead. You do not need a plugin for such a simple request, not even jQuery, but pure javascript.
DEMO http://jsfiddle.net/8U3C7/
Swap the src image on mouse down
<img src="myFirstImage.jpg" onmousedown="document.swap.src='myFirstImage.jpg';" />
Although you didn't explain yourself clearly, this is a WORKING DEMO for you. Next time try describe yourself better in English, and show people at least what you have tried not to ask for a simple solution.
Uses just plain js and css.
function updateIMG(e) {
document.getElementById("preview").src = e;
}
try this plugin it's quite similar to against your requirement: Galleriffic

Multiple captions for an image - click on links to see one at a time

What I'm trying to do is something like you see at http://www.nejm.org/doi/full/10.1056/NEJMimc1109704. (Click Play and go to page 5 - the interactive physical exam.) I think they are doing this with Flash, but I'd like to use javascript/jQuery.
Basically there's an image that has multiple captions. The captions have arrows that point to different parts of the image, but that's not essential for me. When you click on different links, different captions appear.
Would I tackle this as an image map? I.e. create a map, and use jQuery to toggle different parts of the map? Is there a plug-in that does that? Google searches aren't helping me - but maybe I don't know what to look for. Any help will be appreciated.
I'm having the same problem and I found imageMapster. Check out
http://www.outsharked.com/imagemapster/default.aspx?demos.html#beatles
I think this is what you want to do. Just this solution today, haven't figured it out yet. Looks promising though. Otherwise check out qTip2
http://craigsworks.com/projects/qtip2/demos/
Maybe some adaptions let you/us do what we wanna do
Good luck! Keep u updated if I figured it out
Why would you need jQuery?
Anyway, put your main image down, and set its position to be fixed where you want it. You could even put it in a nice container div, just make sure all your caption divs are relative to the same parent. Then put fixed position divs of your caption images over it with a higher z-index in your css. Then place your caption images at the appropriate top and left positions until they are correct. Of course, use transparent PNGs.
All you need to do to toggle them is set the element's style.display to "none" or "inherit"

HTML/CSS/JS: Rollover-Effect for navigation-menu

I got another CSS/JS question: I want to make a navigation menu, where there is at the beginning a div with just a text in it. If I hover with the mouse on it, there should appear a background from the left to the right.
Is this only possible with JS (so if hover, an interval gets startet which moves the background behind the text) or are there any other possibilities?
I hope you understood what I tried to say ...
Thanks for help!
Flo
EDIT: It's something moving just like this navigation here: http://iipvapi.com/, but only a simple background from the left to the right.
You could use the :hover CSS selector. This will not provide animation functionality though. It will just apply the style or not based on whether you are hovering.
You could do it with pure JavaScript, but it would be a little awkward if you want animation.
You could do it with JavaScript using jQuery, which provides animation functionality and is easy to use. You probably want the animate function, as it sounds like a bit more of a custom solution than functions such as slideDown would provide.

mouse over popup menu

Creating a website using simple html(not html5) and css but got stock in mouseover effect. Need to show some text with background image when user mouseover a link. Following is an example..
NORMAL:
OVER:
I don't think it is possible to create the effect with simple CSS. My question is what is the most effective way to create the over effect and how? Javascript, DHTML or other language...
Thanks in advance...Rex...
Rex,
I think you would find jQuery very useful. jQuery is a javascript framework, very easy to use. www.jquery.com
You can achieve your effect with pure javascript, but again I think you will find using a javascript framework much easier, since your coming from actionscript.
For your particular instance I would make a div absolutely positioned. To show the div on mouseover you can use the jQuery $("#div_id").show(); and on mouseout use .hide();
Here is a basic tutorial for using show hide on events with jQuery.
http://www.learningjquery.com/2006/09/slicker-show-and-hide
Good luck!
You can use javascript to show a hidden div which is having text written inside it.
use javascript's onmouseover and onmouseout events to do this.
However have you tried using href:hover property of css to achieve this?

CSS / Jquery Effect - What is this?

on this website: http://www.eco-environments.co.uk/ if you scroll down to "What we do" and rollover the links you get a bubble popup display, can anyone tell me how this is created please?
Thanks
You can use a jQuery plugin like jquery tooltips for this kind of effect. Check out the demos.
This is actually an effect that is pretty simple to create.
First, there is a hidden div in the HTML for the Tooltip.
<div class="popup" style="display:none;">Hidden Content Here</div>
Then javascript can be used to show the hidden content when something is hovered over. For instance, here is how it would work using jQuery (and using the example page as an example).
$(".tooltip").hover(function(){
$(this).children(".popup").fadeIn(); // Other effects can be used to show the Tooltip
},
function() {
$(this).children(".popup").fadeOut();
});
The rest is a matter of using CSS to make sure that the Tooltip is positioned correctly and making it look nice (in most cases absolute positioning would be used). There are a lot of different techniques to making nice CSS for Tooltips, so as always Google is your friend.
it appears to be using the normal jQuery Hover.details at http://docs.jquery.com/Events/hover

Categories