Forum:Rollover Buttons using html

Initial Problem
I have three separate questions but all involve the use of html in wikia articles:
 * 1) Is there a way to use html in a wikia article to display and make functional a rollover image such as a "click-me" button?
 * 2) Is there a way to use html to cause a pop-up window to appear when hovering over a text link or image?
 * 3) If it involves the use of a CSS stylesheet, (and our's is currently empty) would adding any sort of java-script code or html code mess up the rest of the site's display features?

I have searched both on the wikia help pages, the forum, and via google search and can not seem to find any clear answers. So your help would be most graciously appreciated.

Response #1

 * All of those can be done, but require more information. Can you give an example of what you're trying to do?

Additional Information

 * Sure thing!
 * First I'm trying to create a button that I can use in an article that when you place a cursor over it, it changes: :: (example images/page) http://eversor.wikia.com/wiki/Template:Animate1
 * (example code:)

 
 * I've tried using the   tags, using the [html] tag, the tag, the /[body] tags and try as I may I can't get the script to work. I've got both images loaded to the wikia. I'm thinking I need some sort of javascript code put into a CSS page but I've been leery of doing anything to the CSS page as the one we have is currently blank, and we like the layout we have and don't want to mess it up.


 * On #2 we want to create a pop-up window that when a user moves his/her cursor over an image, a new small pop-up window will appear giving additional descriptive information about the item (rather than using an info box which takes up too much room on the page)
 * (example) on this page: http://eversor.wikia.com/wiki/Harvesting we'd like a user to be able to put their cursor over a Location word such as "Forest Ruins" and a pop up window appear which gives additional info such as location waypoint, a small thumbnail showing a map location, level of zone etc. I believe that this sample code could somehow be used:

 function openWinBoo {   NewWindow=window.open ('/res/File/articles/development/javascript/opening-windows-with-javascript/boo.html', 'boo',   'width=180,height=50'); }


 * and

 Click here


 * Both issues requires Javascript and maybe a CGI script? I fully admit I am way over my head here, but I'd LOVE to figure out how to make it all work.


 * You will most likely have to setup some CSS to identify the elements you want to be the rollover by class and then create Javascript to insert the HTML and script to display and trigger the rollover image.
 * However it sounds like you don't just want a rollover, but a styled tooltip window to appear. This is alot more work. There used to be a generic solution that worked, but I think Wikia broke it around the time they introduced Oasis skin. -- Fandyllic (talk &middot; contr) 27 Apr 2011 5:47 PM Pacific

Question #2
There was a question just like that a few months ago (after oasis and the changes to user agreement), I bookmarked the answer: http://sacredseasons2.wikia.com/wiki/Areas but they have changed the page since then. :(

It had all that was needed.


 * The tooltips are still working on that page when hovering over the "Portal Types", no functionality has been removed. But these are not HTML tooltips - they require a few lines in the css page. Sovq 12:43, April 28, 2011 (UTC)


 * Here's the CSS they use:

 /* tooltip experiment */ .tooltip { border-bottom: 1px dotted #A4770F; color: #A4770F; cursor: default; } .tooltip span { margin-left: -999em; position: absolute; } .tooltip:hover span { border: 1px #6D0D00 solid; !important; -moz-border-radius: 6px; -webkit-border-radius: 6px; color: #cfcfcf; z-index: 99; position: absolute; margin-left: 0; width: 250px; } .classic { padding: 0.8em 1em; } .custom { padding: 0.5em 0.8em 0.8em 2em; } .classic {background: #000000; border: 1px solid #6D0D00; }
 * html a:hover { background: transparent; }

/* end of tooltip experiment */
 * -- Fandyllic (talk &middot; contr) 28 Apr 2011 9:31 AM Pacific