onMouseOver highlighting and Description box?

  • Krazy^
  • Newbie
  • Newbie
  • Krazy^
  • Posts: 5
  • Loc: Copenhagen, Denmark

Post 3+ Months Ago

Hello

I'm working on a clan website, currently attempting to develop the Event calendar.
The calendar itself works well, but there are some things missing....

this is my current code:

Code: [ Select ]
.Highlight {background-color:#BCC1CE; height: 30px; width:40px; font:"Trebuchet MS"; font-size:10;}
.Normal{background-color:#9CA1AE; height: 30px; width:40px; font:"Trebuchet MS"; font-size:10px; text-align:center;}
.Hiddent{background-color:white; height: 30px; width:40px;}


<table cellpadding=2 align="center" width="100%">
 <tr align="center">
     <td><strong>Mon</strong></td>
    <td><strong>Tue</strong></td>
    <td><strong>Wed</strong></td>
    <td><strong>Thu</strong></td>
    <td><strong>Fri</strong></td>
    <td><strong>Sat</strong></td>
    <td><strong>Sun</strong></td>
    </tr>
 <tr align="center" valign="middle">
  <td class="Hidden">
  </td>
  <td class="Hidden">
  </td>
  <td class="Hidden">
  </td>
  <td class="Hidden">
  </td>
  <td class="Hidden">
  </td>
  <td class="Hidden">
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">1
  </td>
 </tr>
 <tr align="center">
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">2
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">3
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">4
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">5
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">6
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">7
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">8
  </td>
 </tr>
 <tr align="center">
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">9
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">10
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">11
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">12
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">13
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">14
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">15
  </td>
 </tr>
 <tr align="center">
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">16
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">17
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">18
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">19
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">20
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">21
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">22
  </td>
 </tr>
 <tr align="center">
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">23
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">24
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">25
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">26
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">27
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">28
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">29
  </td>
 </tr>
 <tr align="center">
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">30
  </td>
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">31
  </td>
  <td class="Hidden">
  </td>
  <td class="Hidden">
  </td>
  <td class="Hidden">
  </td>
  <td class="Hidden">
  </td>
  <td class="Hidden">
  </td>
 </tr>
</table>
  1. .Highlight {background-color:#BCC1CE; height: 30px; width:40px; font:"Trebuchet MS"; font-size:10;}
  2. .Normal{background-color:#9CA1AE; height: 30px; width:40px; font:"Trebuchet MS"; font-size:10px; text-align:center;}
  3. .Hiddent{background-color:white; height: 30px; width:40px;}
  4. <table cellpadding=2 align="center" width="100%">
  5.  <tr align="center">
  6.      <td><strong>Mon</strong></td>
  7.     <td><strong>Tue</strong></td>
  8.     <td><strong>Wed</strong></td>
  9.     <td><strong>Thu</strong></td>
  10.     <td><strong>Fri</strong></td>
  11.     <td><strong>Sat</strong></td>
  12.     <td><strong>Sun</strong></td>
  13.     </tr>
  14.  <tr align="center" valign="middle">
  15.   <td class="Hidden">
  16.   </td>
  17.   <td class="Hidden">
  18.   </td>
  19.   <td class="Hidden">
  20.   </td>
  21.   <td class="Hidden">
  22.   </td>
  23.   <td class="Hidden">
  24.   </td>
  25.   <td class="Hidden">
  26.   </td>
  27.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">1
  28.   </td>
  29.  </tr>
  30.  <tr align="center">
  31.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">2
  32.   </td>
  33.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">3
  34.   </td>
  35.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">4
  36.   </td>
  37.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">5
  38.   </td>
  39.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">6
  40.   </td>
  41.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">7
  42.   </td>
  43.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">8
  44.   </td>
  45.  </tr>
  46.  <tr align="center">
  47.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">9
  48.   </td>
  49.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">10
  50.   </td>
  51.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">11
  52.   </td>
  53.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">12
  54.   </td>
  55.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">13
  56.   </td>
  57.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">14
  58.   </td>
  59.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">15
  60.   </td>
  61.  </tr>
  62.  <tr align="center">
  63.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">16
  64.   </td>
  65.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">17
  66.   </td>
  67.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">18
  68.   </td>
  69.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">19
  70.   </td>
  71.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">20
  72.   </td>
  73.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">21
  74.   </td>
  75.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">22
  76.   </td>
  77.  </tr>
  78.  <tr align="center">
  79.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">23
  80.   </td>
  81.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">24
  82.   </td>
  83.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">25
  84.   </td>
  85.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">26
  86.   </td>
  87.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">27
  88.   </td>
  89.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">28
  90.   </td>
  91.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">29
  92.   </td>
  93.  </tr>
  94.  <tr align="center">
  95.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">30
  96.   </td>
  97.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">31
  98.   </td>
  99.   <td class="Hidden">
  100.   </td>
  101.   <td class="Hidden">
  102.   </td>
  103.   <td class="Hidden">
  104.   </td>
  105.   <td class="Hidden">
  106.   </td>
  107.   <td class="Hidden">
  108.   </td>
  109.  </tr>
  110. </table>


What i would like it to be, is more interactive really.
when hovering a date, where a event is scheduled, I'd like to see a popup description of the event, while it's still being highlighted....

is this at all possible?

Also, if someone could point me in the direction of where i could get/find a calendar for all months, that would also be brill..

Thanks!
Krazy^
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1893
  • Loc: Las Vegas

Post 3+ Months Ago

yep, it's possible. When you are drawing the calendar, add the info you want to display to the title attribute of the table cell like so:

Code: [ Select ]
  <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'" title="Today there is a party on the lawn!!!">2
  </td>
  1.   <td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'" title="Today there is a party on the lawn!!!">2
  2.   </td>


This works in IE and Mozilla. Haven't checked others. If you want more control over the actual tooltip, google for "javascript tooltips". There are plenty of pre-made tooltip scripts out there that work really well.
  • Krazy^
  • Newbie
  • Newbie
  • Krazy^
  • Posts: 5
  • Loc: Copenhagen, Denmark

Post 3+ Months Ago

thanks a lot dude, just what i needed! :D

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 58 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.