Forum:Imagemap issue

Hi all. Some time ago I took from the Avatar wiki templates to display era icons on the top right of articles on Combine OverWiki. It uses two templates and the imagemap tag. I last edited both on March 29, and they have been fine since. But today suddenly they don't work anymore, for some reason. They can be found here and here (this is where the imagemap is), and here's a example here. What's happening? Thanks for your help! Klow 09:28, April 15, 2010 (UTC)


 * It seems there's a problem with the pipe character ("|") in, because here is inserted inside a table, and pipes are problematic inside tables. You can see the rendered wikitext here, and notice how the text next to the pipe is simply missing.
 * Anyway, there's no need to use imagemap for linking an image to another article. Just use the "link=" parameter of the image to do that. This would solve the problem. --Ciencia Al Poder (talk) -WikiDex 18:10, April 15, 2010 (UTC)
 * Ok! But could you give me an example of "link=" in Template:Article/SubIcon?... Klow 18:45, April 15, 2010 (UTC)
 * See Help:Displaying_images --Ciencia Al Poder (talk) -WikiDex 14:15, April 16, 2010 (UTC)
 * The bug just fixed itself for the second time. There must be a reason, what is it?... Klow 21:01, April 16, 2010 (UTC)
 * About the other system: what do I do with "default" and "desc none"? I don't even know what that is... Klow 21:03, April 16, 2010 (UTC)

Thank you for choosing my home wiki's icon system. ;) This seems like a very strange problem, because I can't see the difference between our template and your template, and ours has never stuffed up. What I can tell you at this stage is that for imagemap, "default" is one of the choosers that tells a part or section of the image to link to a particular page. "Default" means that the entire picture links to one page (as opposed to specifying only a face on a portrait, for example). For imagemap, there's also normally a blue icon with "i" on it, which brings up the file page if you click on it. "Desc none" gets rid of this blue icon.

If you use the newer "link=" system, the only functionality you'll lose immediately is the nice text you get hovering over it. You can get it back though by placing  tags around the image and specifying something like    The 888th Avatar   (talk)  23:58, April 16, 2010 (UTC)


 * Seems to be working now (purge). Per everyone else, yes, using link= is usually preferred over imagemap tags, unless you're making imagemaps or need one for the features of imagemaps.
 * If you or anybody needs help with any Avatar Wiki templates, I'm usually around to help out, but sometimes I won't read every forum on Central, especially those already edited by others. Cheers, Joey (talk) 01:00, April 17, 2010 (UTC)


 * What I don't understand, is that it fixed itself for the second time! I've had that issue before, and it just fixed itself without me doing anything! So anyway I'll change the system to one you suggest. Should be more stable. Thanks! Klow 08:29, April 17, 2010 (UTC)


 * It was really strange, because the avobe links I've provided showed that the text after the pipes were missing, and now the text appears... Maybe a bug in the parser cache. --Ciencia Al Poder (talk) -WikiDex 20:05, April 17, 2010 (UTC)


 * Ok I used "link=" and it works like a charm, but the suggested span tag doesn't work to show a text. Any alternative?... Klow 10:36, April 18, 2010 (UTC)


 * It is an override issue. While you could specify a span title for say plain text, the file name overrides a span title while displaying an image, and a caption overrides display of the file name, and a link overrides all the others. There is only one way I know of around this issue and it isn't terribly elegant in that the text to display has to be unique for each image (if each image goes to a different article link), you can create a page with the title as the desired text to display, then redirect that page to the desired article you wish the image to take you to when clicked. --Tlosk 18:09, April 18, 2010 (UTC)
 * I don't want a redirect, I want a direct link... :/ Klow 18:53, April 18, 2010 (UTC)

Yes, unfortunately, the  solution I suggested doesn't work if the image is linking to another page. :S There is no way to solve this except for the less-than-perfect solution suggested by Tlosk. (Hence the point of using imagemap for something like this.) The 888th Avatar   (talk)  01:32, April 19, 2010 (UTC)


 * Well, I'm a bit tired of imagemap one day working, the other day not working. That text is not that vital anyway, so I'll stick to the current way for now. Thank you all for your suggestions! ;-) Klow 08:29, April 19, 2010 (UTC)


 * If you ever get tired of the problems with that way of displaying icons, you could try the way The Vault does it. Their way involves adding something to your site MediaWiki:Common.css and MediaWiki:Common.js, but it would fix some positioning issue you seem to be having.
 * Have you noticed that the "dismiss" button of your site notice overlaps your icons? ~Gardimuer 06:31, April 22, 2010 (UTC)


 * :S I thought the initial issue here was that imagemap wasn't working. There isn't really a positioning issue - the icons are showing where they were designated to be...
 * Nonetheless, The Vault certainly does have a cleaner icon system, mainly because the icons would automatically go down when there is a Sitenotice/Anonnotice.
 * To save anyone looking through this forum some time, here's what would need to be added to Common.js:

function addTitleGames {   var titleDiv = document.getElementById("title-games"); if (titleDiv != null && titleDiv != undefined) {      var content = document.getElementById('article'); if (!content) {        var content = document.getElementById('content'); }

if (content) {         var hs = content.getElementsByTagName('h1'); var firstHeading; for (var i = 0; i < hs.length; i++){ if ( (' '+hs[i].className+' ').indexOf(' firstHeading ') != -1){ firstHeading=hs[i]; break; }         }          var cloneNode = titleDiv.cloneNode(true); firstHeading.insertBefore(cloneNode, firstHeading.childNodes[0]); cloneNode.style.display = "block"; cloneNode.style.visibility = "visible"; if (skin != "monaco") {           cloneNode.style.marginTop = "-11px"; }      }    } }

addOnloadHook( addTitleGames );
 * And adding to Common.css:

float: right; display: none; visibility: hidden; position: relative; margin: -17px 0 0; min-width: 325px; text-align: right; }
 * 1) title-games {

font-size: 0.9em; }
 * 1) title-games,
 * 2) title-games a {
 * Then, the template would require the use of a div with "id=title-games". Obviously, the name of the id ("title-games") can be changed. The 888th Avatar   (talk)  07:04, April 22, 2010 (UTC)