Forum:I need some javascript/css help!

I'm not even a beginner at javascript, so in addition to that, I don't know how to write any. I'm deciding to change the appearance of Isle of Tune Wiki's main page, as it is similar to Help:Contents, so I'm thinking of using bubbles when your mouse hovers over the button. I would like to name it "mainpagehover". I would like those styles for the bubble (for the CSS): Margin (to all sides): 5px Background URL: http://images3.wikia.nocookie.net/isleoftune/images/3/34/Main_Page_Bubble.png Font Size: 13px

Width: 215px Height: 125px Opacity: 0.8 Font Color: #ebebeb



Also, I would like when I insert  and   to let the font be 14px size and bold (font-weight: bold); meaning the css should look something like this the span: However, I would like some extra styles (done with javascript): If you don't quite understand it, feel free to reply to this message here! &mdash; [/wiki/User:Sam_Wang S a m ] [/wiki/User_talk:Sam_Wang W a n g ] 10:34, March 12, 2012 (UTC)
 * 1) Don't display anything of the CSS part when the mouse hasn't hovered over the picture yet.
 * 2) When your mouse hovers over it, wait 0.5 seconds, and then fade in for 0.2 seconds.
 * 3) The sharp part of the bubble should be where your cursor is, and will change place automatically to where your mouse moves (this only applies if it is on the button, approximately 100px x 100px size).
 * I cannot believe nobody can answer this question &mdash; [/wiki/User:Sam_Wang S a m ] [/wiki/User_talk:Sam_Wang W a n g ] 04:46, March 14, 2012 (UTC)


 * Well, I'm not sure what you're asking. Do you want a popup to appear on hover, or a button that changes colors? If the latter, you should just be able to use :hover</tt> and a few CSS <tt>transition</tt> properties. If the former, I think there's some alt popup JavaScript floating around somewhere... 04:56, March 14, 2012 (UTC)


 * It's not that no one can... maybe no one has the time to work up what you want. What you are asking is not a simple thing someone can just output in a few minutes. I would, however, look into the JS WoWWiki used for their tooltips. That may be a good starting point. Rappy 04:59, March 14, 2012 (UTC)

Airhogs777, a popup to appear on hover. Styles listed above &mdash; [/wiki/User:Sam_Wang <font color=#bdbdbd>S <font color=#bfbfbf>a <font color=#bibibi>m ] [/wiki/User_talk:Sam_Wang <font color=#bkbkbk>W <font color=#bmbmbm>a <font color=#bobobo>n <font color=#bqbqbq>g ] 05:05, March 14, 2012 (UTC)


 * Rappy 4187, why is WoWWiki useful? &mdash; [/wiki/User:Sam_Wang <font color=#bdbdbd>S <font color=#bfbfbf>a <font color=#bibibi>m ] [/wiki/User_talk:Sam_Wang <font color=#bkbkbk>W <font color=#bmbmbm>a <font color=#bobobo>n <font color=#bqbqbq>g ] 05:06, March 14, 2012 (UTC)


 * Because WoWWiki has tooltip code similar to what you are looking for. I mentioned that above when I mentioned WoWWiki. Rappy 05:09, March 14, 2012 (UTC)


 * Looking through WOW's code, the page you want might be Tooltip pseudo code or Tooltip. 05:11, March 14, 2012 (UTC)


 * I don't even know about which javascript meant what, as I don't understand js. Can you tell me please? &mdash; [/wiki/User:Sam_Wang <font color=#bdbdbd>S <font color=#bfbfbf>a <font color=#bibibi>m ] [/wiki/User_talk:Sam_Wang <font color=#bkbkbk>W <font color=#bmbmbm>a <font color=#bobobo>n <font color=#bqbqbq>g ] 05:24, March 14, 2012 (UTC)


 * Sorry, if you're expecting an answer from me, I'm not really an expert on this. 06:21, March 14, 2012 (UTC)

Does anybody else have an idea? &mdash; [/wiki/User:Sam_Wang <font color=#bdbdbd>S <font color=#bfbfbf>a <font color=#bibibi>m ] [/wiki/User_talk:Sam_Wang <font color=#bkbkbk>W <font color=#bmbmbm>a <font color=#bobobo>n <font color=#bqbqbq>g ] 11:19, March 14, 2012 (UTC)


 * This is like saying... "I'd like to build a nuclear missile and all I have is some scrap metal." Not many people are willing to make something so complicated out of nothing. With that being said, I'd bug Monchoman45. He's one of the few that are willing. Rappy 19:57, March 14, 2012 (UTC)

I assume you want to make the bubble appear, with the styles you gave, when you hover over the button? If you want to do that, you could do something like this in your CSS: .helptopics a .mainpagehover { background-image:url(http://images3.wikia.nocookie.net/isleoftune/images/3/34/Main_Page_Bubble.png); width:0px; height:0px; overflow:hidden; font-size:13px; opacity:0; color:#EBEBEB; margin-top:-125px; position:absolute; z-index:10; transition:opacity 0.2s ease 0.5s, width 0s ease 0.7s, height 0s ease 0.7s; -webkit-transition:opacity 0.2s ease 0.5s, width 0s ease 0.7s, height 0s ease 0.7s; -moz-transition:opacity 0.2s ease 0.5s, width 0s ease 0.7s, height 0s ease 0.7s; -o-transition:opacity 0.2s ease 0.5s, width 0s ease 0.7s, height 0s ease 0.7s; }

.helptopics a:hover .mainpagehover { width:212px; height:125px; opacity:0.8; transition:width 0s ease 0.5s, height 0s ease 0.5s; -webkit-transition:width 0s ease 0.5s, height 0s ease 0.5s; -moz-transition:width 0s ease 0.5s, height 0s ease 0.5s; -o-transition:width 0s ease 0.5s, height 0s ease 0.5s; }

.mainpagehover div { margin:5px; margin-bottom:25px; }

.mainpagehover span { font-weight: bold; font-size: 14px; } and then add  to the contents of the help boxes. If you need any more help, you can message me on my message wall. 21:15, March 15, 2012 (UTC)