Results 1 to 7 of 7
-
12th Jun 2011, 10:57 AM #1OPBanned
how can i do this with images?
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=Hepsikuzukuzu Reviewed by kuzukuzu on . how can i do this with images? 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 Rating: 5
-
12th Jun 2011, 11:07 AM #2Banned
Jquery and CSS
-
12th Jun 2011, 11:31 AM #3OPBanned
yeah but i cant code, can please anyone help me with a code
-
12th Jun 2011, 12:04 PM #4Banned
Got it:
To create the puff popup bubble effect, we need the following:
- Markup that assumes that JavaScript is disabled. It would be fair to say that the popup would be hidden from the CSS.
- The hidden popup, correctly styled for when we make it appear.
- 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
- On mouseover: reset the position of the popup (required because we?re floating upwards as we puff away).
- Animate the popup?s opacity from 0 to 1 and move it?s CSS top position by negative 10px (to move upwards).
- If the mouseover is fired again, and we?re still animating - ignore.
- If the mouseover is fired again, and the popup is already visible - ignore.
Mouse Out
- Set a timer to trigger the popup hide function (this prevents accidentally moving out of the ?active? area).
- If a timer is set (to hide), reset the timer (thus only allowing one hide function to fire).
- 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).
- 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:
------------------------------------------------------------------------
please +REP me !
-
12th Jun 2011, 12:06 PM #5Banned
u need to modify this script to work as at that site
-
12th Jun 2011, 04:48 PM #6OPBanned
i cant code
-
12th Jun 2011, 05:44 PM #7Member
o zaman ogren
you can also find someone who can do that for you, or download a template?"Keep your friends close and your enemies even closer"
-Sun Tzu
Sponsored Links
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Similar Threads
-
CH Images
By BlueError in forum Graphics AreaReplies: 1Last Post: 24th Apr 2012, 10:51 PM -
Broken Images overlapping New Images
By Leeds in forum vBulletinReplies: 8Last Post: 17th Apr 2012, 08:57 PM -
Free images host uploader - images will not expire!
By jippo in forum Useful SitesReplies: 11Last Post: 11th Feb 2011, 11:58 PM -
Images Watermarker of my Images and Upload it!!
By Bytes in forum Completed TransactionsReplies: 11Last Post: 5th Aug 2010, 11:24 AM
themaRegister - register to forums...
Version 3.39 released. Open older version (or...