The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Mousover Transition

View previous topic View next topic Go down

Mousover Transition

Post by Kaizer Lee on December 17th 2013, 2:48 pm

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:

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

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Re: Mousover Transition

Post by Sir. Mayo on December 17th 2013, 4:57 pm

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?

Sir. Mayo
Forumember

Male Posts : 969
Reputation : 87
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Re: Mousover Transition

Post by Kaizer Lee on December 19th 2013, 2:47 am

-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

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

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Re: Mousover Transition

Post by Legolas on December 19th 2013, 7:53 pm

Hello,
Your forum is under maintenance. Please, notify me when i can visit it.

Legolas
Forumember

Male Posts : 262
Reputation : 33
Language : English

http://www.daily-support.org

Back to top Go down

Re: Mousover Transition

Post by Kaizer Lee on December 20th 2013, 6:33 am

Yeah, it is, which is why I'm asking how to do the mousover transition thingy so I can implement it already :l

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Re: Mousover Transition

Post by Sir Chivas™ on December 20th 2013, 6:37 am

Hi Kaizer,

Is this what youre looking for? Well similar to this: http://www.w3schools.com/css/css3_transitions.asp

Regards,
Sir Chivas.

Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Re: Mousover Transition

Post by Kaizer Lee on December 21st 2013, 5:23 pm

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 Smile.

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>

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Re: Mousover Transition

Post by Sir Chivas™ on December 21st 2013, 6:09 pm

All right, thank you for providing the answer.
Thread Locked & Archived.

Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Re: Mousover Transition

Post by Sir Chivas™ on December 30th 2013, 1:18 am

Unlocked and moved back, requested by the author.

Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Re: Mousover Transition

Post by Kaizer Lee on January 3rd 2014, 10:01 am

Does anyone know how to make it work on a forum :'(?

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum