WoW onmouseover effect
Asked Modified Viewed 2,274 times
asked
Hi,
Since a short period of time I am using PHP fusion for my world of warcraft guild. It's simple and easy to work with. Only, i dont know much of PHP (just started a course tho).
What I'd like to embed in the forum is an onmouseover effect just like on www.thottbot.com (example: http://www.thottbot.com/?s=cane)If you hover over the items the specifications appear, it's those specifications i want)
I know some forums use the thottbot database. I've allready found a thread for php-nuke, but nuke isnt what i want. http://www.karakas-online.de/forum/vi...php?t=4856
It's a lot of code and I'm definatly not experienced enough with php/javascript to make it useable for php-fusion.
Maybe someone can see this as a challenge? I'd really really like to have this but I'm out of resources.
Many thanks in advance!
Since a short period of time I am using PHP fusion for my world of warcraft guild. It's simple and easy to work with. Only, i dont know much of PHP (just started a course tho).
What I'd like to embed in the forum is an onmouseover effect just like on www.thottbot.com (example: http://www.thottbot.com/?s=cane)If you hover over the items the specifications appear, it's those specifications i want)
I know some forums use the thottbot database. I've allready found a thread for php-nuke, but nuke isnt what i want. http://www.karakas-online.de/forum/vi...php?t=4856
It's a lot of code and I'm definatly not experienced enough with php/javascript to make it useable for php-fusion.
Maybe someone can see this as a challenge? I'd really really like to have this but I'm out of resources.
Many thanks in advance!
answered
Hmm its only a script where you put your mouse over and it shows an image, i've done that on a few sites, if you give me a minute i'll get you the script
answered
ok 1st off all you'll need a CSS file... just type this code in notepad then save as test.css
Ok then on where ever you want your image to do what ever type this
Code Download source
body {
background: #FFFFFF;
color: #000000;
font-family: verdana, arial, sans-serif;
font-size: 0.8em;
margin: 20px 0px 0px 0px;
padding: 0;
text-align: left;
}
h2 {
color: #C2C7BE;
font: normal small-caps bold 2.5em Verdana, sans-serif;
text-decoration: underline;
}
.right {
font-size: 1.0em;
padding-right: 100px;
text-align: right;
}
#info {
border: 1px solid #C2C7BE;
margin-left: 80px;
margin-right: 80px;
margin-top: 20px;
padding: 0px 15px 0px 15px;
position: relative;
}
#info a, #info a:visited {
color: #8A9483;
text-decoration: none;
}
#info a:hover {
color: #9BA495;
text-decoration: underline;
}
#pic {
background-color: #FFFFFF;
left: 10px;
position: relative;
top: 10px;
width: 135px;
}
#pic a .large {
border: 0px;
display: block;
height: 1px;
left: -1px;
position: absolute;
top: -1px;
width: 1px;
}
#pic a img {
border: 0;
}
#pic a.p1, #pic a.p1:visited {
background: #FFFFFF;
border: 1px solid #000000;
display: block;
height: 90px;
left: 0;
text-decoration: none;
top: 0;
width: 135px;
}
#pic a.p1:hover {
background-color: #8C97A3;
color: #000000;
text-decoration: none;
}
#pic a.p1:hover .large {
border: 1px solid #000000;
display: block;
height: 233px;
left: 150px;
position: absolute;
top: -60px;
width: 300px;
}
#top {
margin-left: 80px;
}Ok then on where ever you want your image to do what ever type this
Code Download source
<html>
<head>
<link rel="stylesheet" media="all" type="text/css" href="test.css" />
</head>
<div id="pic">
<a class="p1" href="" title="thumbnail image"><img src="images/smallpic.jpg" alt="Thumbnail image" width="135" height="90" title="Thumbnail image" /><img src="images/bigpic.jpg" alt="Enlarged view of image" width="350" height="233" class="large" title="Enlarged view of image" /></a>
</div> answered
TNX a lot :)
that worked
that worked
Category Forum
Official Core Support - 6Labels
None yet
Statistics
- Views 0 views
- Posts 3 posts
- Votes 0 votes
- Topic users 2 members
0 participants
Notifications
Track thread
You are not receiving notifications from this thread.
Related Questions