Mousover Transition
4 posters
Page 1 of 1
Mousover Transition
Okie dokies,
I tried using a different kind of banner style and I wanna go with the Multi-forums in One + Mouseover style, so my code for mouseover works, but not the transition code:
And I'm sure you guys know the code for the mouseover is a #. Is it possible to make the hovering transitionafied(Lol): If yes, how do I do it? If it requires a script, mind helping me write it? And if no, awwwwwww.
Thank you and howdy~
Merry Christmas!
Regards,
Kaizer
I tried using a different kind of banner style and I wanna go with the Multi-forums in One + Mouseover style, so my code for mouseover works, but not the transition code:
- Code:
#sampletransition {
transition: 1.5s;
}
And I'm sure you guys know the code for the mouseover is a #. Is it possible to make the hovering transitionafied(Lol): If yes, how do I do it? If it requires a script, mind helping me write it? And if no, awwwwwww.
Thank you and howdy~
Merry Christmas!
Regards,
Kaizer
Re: Mousover Transition
I have a few questions:
-What is your forum type?
-What is your forum Url?
-Can you paste the full code (the one for the banner as well)
-Where did you add the transition code?
-What is your forum type?
-What is your forum Url?
-Can you paste the full code (the one for the banner as well)
-Where did you add the transition code?
Re: Mousover Transition
-What is your forum type?
Phpbb2
-What is your forum Url?
http://tokenatoracademy.topicboard.net/forum (Before: mediavalchaos.topicboard.net/forum)
-Can you paste the full code (the one for the banner as well)
I don't think I need to paste it since you only need an ID :l (Not gonna post it due to image issues - will post draft code as substitute)
ID's: img, img2, img3, img4, img5
Draft Code:
HTML
CSS
-Where did you add the transition code?
CSS
Phpbb2
-What is your forum Url?
http://tokenatoracademy.topicboard.net/forum (Before: mediavalchaos.topicboard.net/forum)
-Can you paste the full code (the one for the banner as well)
I don't think I need to paste it since you only need an ID :l (Not gonna post it due to image issues - will post draft code as substitute)
ID's: img, img2, img3, img4, img5
Draft Code:
HTML
- Code:
<img src="" />
<a href="" onMouseOver="document.img.src='img appear';" onMouseOut="document.img.src='1st link';">
<img src="1st link" name="img" />
</a>
CSS
- Code:
#img, #img2, #img3, #img4, #img5 {
transition: 1.5s;
}
-Where did you add the transition code?
CSS
Re: Mousover Transition
Hello,
Your forum is under maintenance. Please, notify me when i can visit it.
Your forum is under maintenance. Please, notify me when i can visit it.
Re: Mousover Transition
Yeah, it is, which is why I'm asking how to do the mousover transition thingy so I can implement it already :l
Re: Mousover Transition
Hi Kaizer,
Is this what youre looking for? Well similar to this: http://www.w3schools.com/css/css3_transitions.asp
Regards,
Sir Chivas.
Is this what youre looking for? Well similar to this: http://www.w3schools.com/css/css3_transitions.asp
Regards,
Sir Chivas.
Sir Chivas™- Helper
- Posts : 6965
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
Re: Mousover Transition
I found what I was looking for o.O. Thanks sir Chivas, but it wasn't the link I wanted, I had to search it in jQuery x_x...
You can lock this now .
Edit: Just realized it works on this one: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadetoggle but not on my forum.
You can lock this now .
Edit: Just realized it works on this one: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadetoggle but not on my forum.
- Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("table").click(function(){
$("#MyImage").fadeToggle();
$("#MyImage2").fadeToggle();
$("#MyImage3").fadeToggle();
$("#MyImage4").fadeToggle();
$("#MyImage5").fadeToggle();
});
});
</script>
</head>
<body>
<table _moz_resizing="true" style="width: 100%;" border="0" cellpadding="5" cellspacing="5">
<tbody>
<tr>
<td style="width: 100%;">
<img src="http://i.imgur.com/DpllaHu.png" title="Starter" /><a href="http://tokenatoracademy.topicboard.net/f5-realm-rules" onmouseover="document.MyImage.src='http://i.imgur.com/9bEm2lz.png';" onmouseout="document.MyImage.src='http://i.imgur.com/LpVzXOy.png?1';"><img id="MyImage" src="http://i.imgur.com/LpVzXOy.png?1" /></a><a href="http://tokenatoracademy.topicboard.net/f6-announcements" onmouseover="document.MyImage2.src='http://i.imgur.com/QgrfF4n.png';" onmouseout="document.MyImage2.src='http://i.imgur.com/O8JwqPJ.png?1';"><img _moz_resizing="true" id="MyImage2" src="http://i.imgur.com/O8JwqPJ.png?1" /></a><a href="http://tokenatoracademy.topicboard.net/f7-introductions-farewells" onmouseover="document.MyImage3.src='http://i.imgur.com/2c80IBI.png';" onmouseout="document.MyImage3.src='http://i.imgur.com/eOaHBnH.png';"><img id="MyImage3" src="http://i.imgur.com/eOaHBnH.png" /></a><a href="http://tokenatoracademy.topicboard.net/f8-suggestions-questions" onmouseover="document.MyImage4.src='http://i.imgur.com/IrahCzs.png';" onmouseout="document.MyImage4.src='http://i.imgur.com/w9OXehQ.png';"><img id="MyImage4" src="http://i.imgur.com/w9OXehQ.png" /></a><a href="http://tokenatoracademy.topicboard.net/f9-basket" onmouseover="document.MyImage5.src='http://i.imgur.com/kobhOTs.png';" onmouseout="document.MyImage5.src='http://i.imgur.com/eGHofvt.png';"><img id="MyImage5" src="http://i.imgur.com/eGHofvt.png" /></a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Re: Mousover Transition
All right, thank you for providing the answer.
Thread Locked & Archived.
Thread Locked & Archived.
Sir Chivas™- Helper
- Posts : 6965
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
Re: Mousover Transition
Unlocked and moved back, requested by the author.
Sir Chivas™- Helper
- Posts : 6965
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
Similar topics
» Transition from one personalized domain to another
» Avatar, Banner and Button Fade Transition
» Slide Transition via Javascript?
» Transition on show/hide JQ
» Javascript css style transition
» Avatar, Banner and Button Fade Transition
» Slide Transition via Javascript?
» Transition on show/hide JQ
» Javascript css style transition
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum