how can i do this with images?

[kuzukuzu]

hello,

i want in my wordpress the next with images. when you go with your mouse on the image you get a text, how can i do this?

example: http://crackpick.com/misc.php?do=page&template=Hepsi

 

[eli~GFX]

Jquery and CSS

 

[kuzukuzu]

yeah but i cant code, can please anyone help me with a code

 

[eli~GFX]

Got it:

To create the puff popup bubble effect, we need the following:

1. Markup that assumes that JavaScript is disabled. It would be fair to say that the popup would be hidden from the CSS.
2. The hidden popup, correctly styled for when we make it appear.
3. jQuery to animate the puff effect on mouseover and mouseout.

The biggest trick to be wary of is: when you move the mouse over the popup, this triggers a mouseout on the image used to trigger the popup being shown. I’ll explain (carefully) how to make sure the effect doesn’t fail in this situation.
I’ve provided a screencast to walk through how create this functionality. Details on how and what I used can be found below.

------------------------------------------------------------------------
HTML Markup

For the purpose of reusability, I’ve wrapped my ‘target’ and ‘popup’ in a div. The target is the element which the user must mouseover to show the popup.
<div class="bubbleInfo">
<img class="trigger" src="http://mysite.com/path/to/image.png" />
<div class="popup">
<!-- your information content -->
</div>
</div> CSS

There’s very little to the minimum required CSS. Of course, how you markup your bubble will change this, and the screencast uses the version from the Coda web site, so there’s a considerable amount of CSS to style the bubble.
The minimum I recommend for the example is:
.bubbleInfo {
position: relative;
}

.popup {
position: absolute;
display: none; /* keeps the popup hidden if no JS available */
}
This way we can absolutely position the popup against the trigger.


------------------------------------------------------------------------
jQuery

To create the effect, we need to run the following animation on the popup element:
Mouse Over

1. On mouseover: reset the position of the popup (required because we’re floating upwards as we puff away).
2. Animate the popup’s opacity from 0 to 1 and move it’s CSS top position by negative 10px (to move upwards).
3. If the mouseover is fired again, and we’re still animating - ignore.
4. If the mouseover is fired again, and the popup is already visible - ignore.

Mouse Out

1. Set a timer to trigger the popup hide function (this prevents accidentally moving out of the ‘active’ area).
2. If a timer is set (to hide), reset the timer (thus only allowing one hide function to fire).
3. Once timed out, animiate the popup’s opacity from 1 to 0 and move it’s CSS top position by negative 10px (to float upwards away).
4. Set the appropriate flags to indicate the popup is now hidden.

------------------------------------------------------------------------

The ‘Trick’

There was one piece of tricky logic that initially I couldn’t work out. Each time I moved the mouse over the popup, it would fire a mouseout on the trigger element - which would hide the popup. This is an undesirable bug.
There may be a another way around this, and from what I can tell, the Coda site developers didn’t solve it this way - but here’s the solution:
You need to clear the timer set in the mouseout (point 1 above) in the mouseover. This completely solves the problem.


Demo:

http://jqueryfordesigners.com/coda-popup-bubbles/

------------------------------------------------------------------------


please +REP me !

 

[eli~GFX]

u need to modify this script to work as at that site :P

 

[kuzukuzu]

i cant code

 

[uLtRaTRim]

o zaman ogren :D

you can also find someone who can do that for you, or download a template? :S