Top Left Text cha

Website Development Services

Actually, I was thinking that would be simple. But, if I set a default image using CSS, it will always jump back to it when you move your mouse off the link. And I'm thinking you would want it to stay on whatever you rolled over last. I hate to yank you from one language to another, but I think jQuery is actually the best way to address this (along with CSS). And it's actually very simple... you can probably look at it and figure out what's going on. And it's not exactly the best practice, but you can put jQuery in an article I believe (otherwise you would put it in a module - positioned at the bottom of the page somewhere). Same with the CSS... it's not the best practice, but you can put it in the article between <style></style>.

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   

0 #1 Timothy Johns 2015-07-14 16:11
So the noConflict version of the jQuery would look like:


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');
}
);
Quote

Add comment


Security code
Refresh

  • No comments found

Leave your comments

Post comment as a guest

0
Your comments are subjected to administrator's moderation.
X