Another note on jQuery... it's normally included in Joomla, but it will probably have conflicts... therefore you will need to load jQuery noConflict (actually, this is also usually included in Joomla). So if you have any conflicts, which you probably will, you'll need to add the first line:
var jQ = jQuery.noConflict(true);
And change all instances of the $ (dollar sign) to jQ
Here's the link again to what it does now: New Example
And the code:
I also threw it in jsFiddle so you can experiment with it if you want... JS Fiddle (but had to use colors instead of background images for it to work locally on jsfiddle)
<html>
<head>
<style>
.container>div {
display:inline-block;
vertical-align:top;
}
.container>#containerImage {
width:400px;
background-color: #9ea1ff;
height:300px;
}
.container>.imageLinks {
width: 300px;
background: #0c86ff;
height:300px;
}
.imageLinks>a {
display: block;
padding: 4px 8px;
border: 1px solid #000;
margin: 10px;
}
.container>.defaultImage {
background:url('/images/default.jpg') no-repeat;
background-size:cover;
}
.container>.showImage1 {
background:url('/images/image1.jpg') no-repeat;
background-size:cover;
}
.container>.showImage2 {
background:url('/images/image2.jpg') no-repeat;
background-size:cover;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div id="containerImage" class="defaultImage"></div>
<div class="imageLinks">
<a id="link1" href="/">First Link</a>
<a id="link2" href="/">Second Link</a>
</div>
</div>
<script>
$("#link1").hover(
function () {
$('#containerImage').removeClass(); /* removes all existing classes first */
$('#containerImage').addClass('showImage1'); /* and adds this new class */
}
);
$("#link2").hover(
function () {
$('#containerImage').removeClass();
$('#containerImage').addClass('showImage2');
}
);
</script>
</body>
</html>
Comments
var jQ = jQuery.noConflict(true);
jQ("#link1").hover(
function () {
jQ('#containerImage').removeClass(); /* removes all existing classes first */
jQ('#containerImage').addClass('showImage1'); /* and adds this new class */
}
);
jQ("#link2").hover(
function () {
jQ('#containerImage').removeClass();
jQ('#containerImage').addClass('showImage2');
}
);
RSS feed for comments to this post