Topic on Project:Support desk

I was wondering if anyone could write a step-by-step plan for something like the following:

http://bavotasan.com/2009/a-simple-mouseover-hover-effect-with-jquery/

A fairly ubiquitous device, so it would surprise me if this wasn't possible in MW. So should any file be modified? Any MW page? How should this be activated in File:...? And so on.

For personal scripts Special:MyPage/common.js or Special:Preferences#mw-prefsection-rendering or site wide see MediaWiki:common.js et al.

Ok, I've copied the code to User:Cavila/common.js, but I'm unsure what to put after "src".

First get rid of the HTML code and comment out the javascript. I am using the English Wikipedia logo as a replacement in the following example.

/*
$(document).ready(function(){
    $(".button").hover(function() {
        $(this).attr("src","//upload.wikimedia.org/wikipedia/mediawiki/b/bc/Wiki.png");
            }, function() {
        $(this).attr("src","//upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png");
    });
});
*/

Uncoment out the script (remove '/*' and '*/') when it is ready and let me know if this works.

Please use CSS for this. JavaScript is capable of doing it, but there is no reason to (and even with JavaScript there are better ways to do it).

Check out Manual:Interface/Stylesheets to see how you can add custom CSS to your wiki (MediaWiki:Common.css or MediaWiki:(the ID of the skin you are using, such as "vector").css).

Add the following to that css page (using the mediawiki.org logo as example):

/* The image shown on hover */
#p-logo a:hover {
  background-image: url(//upload.wikimedia.org/wikipedia/mediawiki/b/bc/Wiki.png);
}

If you want to change the default logo (shown when the area is not hovered), set the $wgLogo configuration.

For both the default and the hover logo, remember that it should be 135x135px in size, and preferably transparent to avoid ugly background conflicts.

OK, thanks, if CSS is recommended practice, then obviously that's the way to go (in addition to being easier to understand). My experience with CSS is fairly limited, so I fiddled around a bit and tried to come up with a procedure.

First, I defined a div class by adding the following to the CSS for the vector skin:

/* CSS experiment: image shown on hover */
div.hoverbox :hover {
   image: url(//upload.wikimedia.org/wikipedia/mediawiki/a/a3/EasyLogicsubset.png);
   border: 2px;
   font-size: 120%;
}

(or alternatively, #hoverbox :hover )

Second, I tried to apply this by placing div tags around the file:

<div class="hoverbox">[[File:EasyLogicpsubset.png]]</div>

(or alternatively, "div id=" )

Unfortunately, that doesn't work, so where did I go wrong?

Try with the following image and stylesheet.

Pasco gull.

div#PascoGull { width: 320px; height: 240px; }
div#PascoGull { background-image: url(//upload.wikimedia.org/wikipedia/commons/4/4f/A_gull_in_Sylvester_Park%2C_Pasco%2C_Washington.jpg); width: 320px; }
div#PascoGull:hover { background-image: url(//upload.wikimedia.org/wikipedia/commons/9/95/A_gull_taking_flight%2C_Pasco%2C_Washington.jpg); width: 320px; }

Edit: Tryed to fix this but it doesn't work for me.

While googling I found this: http://bavotasan.com/2011/amazing-hover-effects-with-css3/

div.top {
	margin: 20px 0;
	position: relative;
	width: 120px;
	height: 70px;
	border: 1px solid #aaa;
	overflow: hidden;
	}	
 
	div.top div {
		width: 100px;
		height: 50px;
		font-size: 12px;
		padding: 10px;
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
		background: #fff;
		}
 
	div.top div.first {
		z-index: 1000;
		}		
 
div.top:hover div.first {
	display: none;
	}

but (a) the effect puts text and/or image in a box and (b) it does not work in IE6 unless you start adding some javascript to the mix. It does give me some ideas to experiment with though.

I'm not sure what you're doing. A CSS hover is a simple effect that is supported in all browsers today (including going back to IE6). CSS3 code can do amazing effects too, but that's overly complex for something this simple and not needed here.

I'm not sure if the sample you pasted earlier was the exact code you used, in that case I recommend trying again without the space in between, because that broke the syntax (.hoverbox:hover instead of .hoverbox :hover. The latter is something very different).