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?
Related
I know how to create an animation, but all I've made just looks like the div is resizing.
Any help?
I will suggest you to use jqueryUI
See this effect
JQUERY-UI .See the transfer effect
Create two classes and than use switchClass
Your first class will be before effect and the second will be after the effects.
http://docs.jquery.com/UI/Effects/switchClass
I suggest try animation via css it will give better control.
http://daneden.me/animate/
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.
I'm looking to recreate the layout that's present at this site:
http://prettytasty.tumblr.com/archive/
The only way to accomplish this is using absolute positioning, however it appears that they're using javascript to dynamically position each image entry on the page. Is there a jquery plugin or example that accomplishes this or something similar?
I realize javascript is the last thing you want to have to depend on for layout, but I'm just curious and would like to see how it is accomplished.
The effect you see on that particular page is actually created with prototype.js, but for jQuery you're probably looking for the jQuery Masonry Plugin
I am using this layover plugin to display content: http://jquery.com/demo/grey/ I know there must be a simple way to add a drop shadow border to the layover, similar to: http://fancybox.net/ but I can't figure out what the best method would be. Any suggestions?
Check out the liquidCanvas plugin. It makes it very easy to add drop-shadows (and other things like gradients and borders) to any element.
There is a full write-up and tutorial at http://www.caffeinedi.com/2009/11/02/using-jquery-and-liquidcanvas-to-add-drop-shadows-borders-rounded-corners-and-other-effects-to-your-website-even-in-ie6-and-ie7/
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