The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Mousover Transition

4 posters

Go down

Mousover Transition Empty Mousover Transition

Post by Kaizer Lee 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
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

Mousover Transition Empty Re: Mousover Transition

Post by Sir. Mayo 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
Sir. Mayo
Forumember

Male Posts : 980
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

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

Back to top Go down

Mousover Transition Empty Re: Mousover Transition

Post by Kaizer Lee 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
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

Mousover Transition Empty Re: Mousover Transition

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

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

Male Posts : 262
Reputation : 33
Language : English

http://www.daily-support.org

Back to top Go down

Mousover Transition Empty Re: Mousover Transition

Post by Kaizer Lee 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
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

Mousover Transition Empty Re: Mousover Transition

Post by Sir Chivas™ 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™
Sir Chivas™
Helper
Helper

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

Back to top Go down

Mousover Transition Empty Re: Mousover Transition

Post by Kaizer Lee 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
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

Mousover Transition Empty Re: Mousover Transition

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

All right, thank you for providing the answer.
Thread Locked & Archived.
Sir Chivas™
Sir Chivas™
Helper
Helper

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

Back to top Go down

Mousover Transition Empty Re: Mousover Transition

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

Unlocked and moved back, requested by the author.
Sir Chivas™
Sir Chivas™
Helper
Helper

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

Back to top Go down

Mousover Transition Empty Re: Mousover Transition

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

Does anyone know how to make it work on a forum :'(?
Kaizer Lee
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

Back to top

- Similar topics

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