HTML and CSS RSS HTML and CSS RSS

Javascript onHover effect ?

Reply
1 2

•
•
Join Date: Jul 2008
Posts: 101
Reputation: ingeva is an unknown quantity at this point 
Solved Threads: 9
ingeva ingeva is offline Offline
Junior Poster

Re: Javascript onHover effect ?

 
1
  #11
Jan 19th, 2009
•
•
•
•
Originally Posted by Designer_101 View Post
Thankyou ingeva
can anyone explain any problems with using onHover events to change the visibility of a div through css visibility of a div ?
If not, then il use that method
The reason why I didn't go into details was that I haven't been using much JavaScript lately so it's a little rusty.

But make a function like this:

HTML and CSS Syntax (Toggle Plain Text) 
  1. function onoff (id,onoff)
  2. { if (!GetElementByID(id)) return false;
  3.       GetElementById (id).visibility = onoff;
  4.    return true;
  5. }

If "onoff" is "hidden" the element will still take up place but in your case it must be in a different layer than the main page, so it doesn't matter. The opposite of "hidden" is "visible".

Of course, you need something like this HTML/JavaScript code for the element:

HTML and CSS Syntax (Toggle Plain Text) 
  1. <div id="element" onmouseover ='onoff("element","visible")' onmouseout ='onoff("element","hidden")'>(to be filled by function)</div>

If you want a text variable to fill the box and set the position ov the element, do it like this:

HTML and CSS Syntax (Toggle Plain Text) 
  1.      GetElementById (id).innerHTML = text;
  2.      GetElementById (id).style.top = top;
  3.      GetElementById (id).style.left = left;

Of course you need to define the top and left positions. You can probably find a routine for that also, but this function is very browser dependable so you may have to do some studying.

To define text variables in JavaScript from php, do this:

HTML and CSS Syntax (Toggle Plain Text) 
  1. <script type="text/JavaScript">
  2. <?php
  3. echo <<<end
  4. <!--   (Some older browsers and "3C validation requires this)
  5. var baby = "$text1";
  6. var doll = "$text2";
  7. var puppy = "$text3";
  8. var teddy = "$text4";
  9. // -->
  10. </script>
  11.  
  12. end;
  13. ?>

...and you can call the function specifying one of the texts: baby, doll, puppy or teddy.
Since I am multilingual, I sometimes put different language texts in different php include files, so all I need to change for a different language is the name of the include file. But this is outside the scope of this thread ....

I recommend the W3schools for help here. Their javascript reference is quite readable, although you need to learn the basics of the language before you get too intimate with the semantics.

I don't know if I can leave an URL here, but if you search for "JavaScript Tutorial" you'll find a link to the W3schhols. W3C is THE authority on web programming standards.

AFTERTHOUGHT:

Since the "visibility" settings can differ between browsers, it might be an idea to use this instead:

HTML and CSS Syntax (Toggle Plain Text) 
  1. function changeStackOrder(layer)
  2. {
  3.     document.getElementById("img1").style.zIndex=layer;
  4. }

"layer" is the layer (or stack) number you want to place the element in. If it's higher than the main page, it will show, and if it's lower (and the main page has an opaque background) it won't. I believe this will work for all browsers that can interpret JavaScript.
Last edited by ingeva; Jan 19th, 2009 at 4:26 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2007
Posts: 258
Reputation: Designer_101 is an unknown quantity at this point 
Solved Threads: 12
Designer_101's Avatar
Designer_101 Designer_101 is offline Offline
Posting Whiz in Training

Re: Javascript onHover effect ?

 
0
  #12
Jan 19th, 2009
ingeva thanyou so much
i'l add to your reputation, that was a really good response.
Thankyou for taking the time
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2009
Posts: 5
Reputation: pmcd9 is an unknown quantity at this point 
Solved Threads: 0
pmcd9's Avatar
pmcd9 pmcd9 is offline Offline
Newbie Poster

CSS Hover effect ?

 
0
  #13
Oct 1st, 2009
Please help with a similar hover problem I am having.

I have written a CSS hover effect and it works perfectly for me, but I want to add the ability for the hover to sense the edge of the browser and adjust itself to remain inside the browser window at all times much like the hover effect works on this messageboard.

Can this be accomplished with CSS or do I have to resort to JavaScript? In either case I don't know how to go about it and would appreciate the help of the more learned members of this board.

Thank you.

Here is the code I have written...

The HTML
HTML and CSS Syntax (Toggle Plain Text) 
  1. 	<td width="53"> 
  2. 		<div align="center"><a class="thumbnail" href="http://www.yahoo.com" target="_blank"><img src="images/thumbTest_1.jpg" width="50px" height="68px" border="0" />
  3. 		<span><img src="images/popoutTest_1.jpg" width="200" height="272" />
  4.         <br />Image Description</span></a>
  5.         </div>
  6. 	</td>

And the css
HTML and CSS Syntax (Toggle Plain Text) 
  1. /*Credits: Dynamic Drive CSS Library */
  2. /*URL: http://www.dynamicdrive.com/style/ */
  3.  
  4. .thumbnail
  5. {
  6. position: relative;
  7. z-index: 0;
  8. padding-left:40;
  9. padding-right:40;
  10. }
  11.  
  12. .thumbnail:hover
  13. {
  14. background-color: transparent;
  15. z-index: 50;
  16. text-decoration: none;
  17. }
  18.  
  19. .thumbnail span /*CSS for enlarged image*/
  20. {
  21. position: absolute;
  22. background-color: lightyellow;
  23. padding: 5px;
  24. left: -1000px;
  25. border: 1px dashed gray;
  26. visibility: hidden;
  27. color: black;
  28. text-decoration: none;
  29. }
  30.  
  31. .thumbnail span img /*CSS for enlarged image*/
  32. {
  33. border-width: 0;
  34. padding: 2px;
  35. }
  36.  
  37. .thumbnail:hover span /*CSS for enlarged image on hover*/
  38. {
  39. visibility: visible;
  40. left: 60px; /*position where enlarged image should offset horizontally */
  41. top: 10px;
  42. }
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC