Help on coding

[jai9x9]

Hi. I'm not very good at HTML, but I'm trying to learn. And I learn well through doing, but I need some help.I'm trying to build a web page based on a game I play. I play some crafters that are able to make specific items, and I'd like to be able to show my guildmates and other server members what I can craft. I'm wanting to build a table that lists out and links all my craftable items and what they take to make them. Thats the easy part. The part I'm having a hard time on is the mouseover effect. Here is an example of what I'm after:http://www.wow-loot.com/raid_mc.htmIf you scroll down to the Instance Drops section, you'll notice that when you mouse over the drops, it displays the details of said item. I've looked over the coding and have been messing with it a little, but I'm having trouble with the onmouseover and onmouseout codes. I've seen different sites use different codes. For example, wow-loot uses the event codes: onMouseOver="tt(i16863);" onMouseOut="ctt();" whereas Allakhazam uses the event codes: onmouseover="showstats(event,'sr16863');" onmouseout="clearstats('sr16863');"Can someone please explain to me whats different? what it means? and how can I use similar coding to get the same "popup" effect?thanks so much

[raimo]

Can someone please explain to me whats different? what it means? and how can I use similar coding to get the same "popup" effect?thanks so much

<{POST_SNAPBACK}>

They are calling different kind of functions. thats the difference, I think.Lets do the same as they have done, but we do it better, faster and cleaner! Add this to head part of Your document:

<script type="text/javascript"><!--function showLayer(e, obj){var x = (e.clientX) ? e.clientX : window.event.clientX;var y = (e.clientY) ? e.clientY : window.event.clientY;var elm = document.getElementById(obj);elm.style.left = x + 10 + 'px';elm.style.top = y + 'px';elm.style.display = 'block';}function hideLayer(obj){var elm = document.getElementById(obj);elm.style.display = 'none';}//--></script><style type="text/css"><!--.hidden{position: absolute;width: 250px;display: none;border: solid 2px #FF6060;background-color: #600000;color: #F0D0D0;}--></style>

And this to the body part:

<div id="layer1" class="hidden">This is the first hidden div.<br />Add something nice here.</div><div id="layer2" class="hidden">This is the second on</div><p onmouseover="showLayer(event, 'layer1')" onmouseout="hideLayer('layer1')">Move mouse here</p><p onmouseover="showLayer(event, 'layer2')" onmouseout="hideLayer('layer2')">Move mouse here</p>

So we have 2 hidden divs (display none) and when mouse is lurking over p tag display attribute is changed to block and selected div appears to visible. When the mouse goes out of p-tag, display will be setted as none again. Mouse position is looked from event and div is moved near mouse before showing. Try that, and please feel free ask more if needed.

[jai9x9]

Thankyou SO much!The speedy reply especially :)It's so much cleaner and easier to make sense of. This is going to make my site so much faster and easier.I'll be sure to post if I have any more questions.

[jai9x9]

ok, heres my next question, how do I change the color of the text in the box that comes up? I need to be able to keep the middle text white, but change parts of it to multiple other colors. What do I need to do to change that?Here's one example of what I'm trying to do. Using your coding in the heading, changed the text in the coding in the body to what I need it to say:<div id="layer3" class="hidden">Black Dragonscale Leggings<br>Binds when equipped <br>LegsMail<br>320 Armor <br>+8 Stamina<br>+13 Fire Resistance <br>Requires Level 57<br>Equip: +54 Attack Power. <br><br>Black Dragon Mail</div><p onmouseover="showLayer(event, 'layer3')"onmouseout="hideLayer('layer3')"><a href="http://wow.allakhazam.com/db/item.html?witem=15052" target="_blank"><img border="0" src="http://wow.allakhazam.com/images/icons/INV_Pants_03.png" height="32" width="32" /> Black Dragonscale Leggings</a></p> I need to change the color and the alignment on some of the text in the div though. I need "Black Dragonscale Leggings" to be in blue, "Legs" needs to stay Left Aligned, "Mail" needs to be Right Aligned, the line starting with the word "Equip:" needs to be in green, and the last line "Black Dragon Mail" needs to be in yellow or gold.What do I change to do this? Thanks

[raimo]

ok, heres my next question, how do I change the color of the text in the box that comes up? I need to be able to keep the middle text white, but change parts of it to multiple other colors. What do I need to do to change that?Thanks

<{POST_SNAPBACK}>

You just added style block to the head part of Your document.Now, add to that block more classes:

.red{color: red;background-color: inherit;}.blue{color: #0000FF;background-color: inherit;}.bold{font-weight: bold;}

And then in body part, where ever You need color (or other style):Some text <span class="red">this is red</span><span class="blue>this is blue</span> and again, original colorized text. <span class="bold">this is bold</span>Can be used with all tags.Look more:http://www.w3schools.com/css/

[jai9x9]

TY SO much!!I was just looking through some more coding and was thinking spans might have something to do with this. I was actually trying to find what they were listed under and was just turning to CSS when I checked for a reply :)I really appreciate the help. I'm such a noob on coding lol