Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
-
- CommentAuthorvickypetersen
- CommentTimeJan 8th 2008
Hi All,
I was wondering if anyone can point me in the direction of a tutorial to help me out with my issue?
I have a div with a plain background image. Inside the div is some text. I would like the background image of the div to change when I mouse over the text within the div.
Thanks for anyone who can help me find a tutorial (or give me the code if they feel kind!) I am not havnig much luck looking in google.
:) -
- CommentAuthordesigncarter
- CommentTimeJan 9th 2008 edited
I stumbled upon the solution you're looking for while searching for something completely different...
in your header tag, insert this javascript.
<script language="javascript" type="text/javascript"><!--
var ns = (document.all)?false:true;
var intBack = 1;
//function for dynamically switching the background image
function changeBg(divId,intBack) {
if (ns){
layerObject = document.getElementById(divId).style;
} else {
layerObject = eval(divId + ".style");
}
layerObject.backgroundImage = 'url(homebkgd'+intBack+'.jpg)';
}
// --></script>
Then, in your text, you'll have a text link like so:
<a href="#" class="linkSidebarU" onmouseover="changeBg('myDiv','3')">Mouseover to change background</a>
It'll call the change fuction called ChangeBG and will apply it to the div with the id "myDiv" (this would change to the id of your div with the background), then call the background "number" or in this case the image that you want to change it to.
If you need help integrating this, or adding features, let me know. -
yes.. you can do this easly using the javascript plugin jquery.. example is below
<script type="text/javascript">
$('#column1').mouseover(function(){
$('#column1').css({ backgroundImage : "url(images/background/pageright.gif)" });
});
</script>
you can change the background image as you like... remember you have to add the jquery framework to do this! -
Use CSS
-
I am trying to do the exact same thing. I have it working for the entire background, but I only need it to work for a certain div. I'm really stuck.
The script I'm using is basically like the one designcarter posted. Any help would be appreciated. Thanks. -
If you convert the whole div into a dummy link (<a href="#"><div id="morpho">content</div></a>)... then...
<style>
a #morpho{background-image:src(first.gif);border:0}
a #morpho:hover{background-image:src(second.gif)}
</style>
spoim[at]blueyonder.co.uk -
It is not valid html to insert a div within a link.
Use the hover pseudo class on the div. Then use the IE7 scripts to make it work in IE6. -
- CommentAuthorthedotmack
- CommentTimeJan 28th 2008
ok dont even put a div inside that dummy link - just make that <a> tag look however you want. In order to do that you have to make the <a> tag display:block, and then you can CSS it however and treat it like a div. Always avoid using "IE7 scripts" whenever possible. Also, as for the prior post of loading jQuery, do not do this unless you need to. the straight up easy JS code to do what you ask is
onmouseover="document.getElementById('divname').style.backgroundImage = 'url(images/bg.gif';"
the background-image property is called with camelCase in JS. (backgroundImage) -
Why would you say "Always avoid using 'IE7 scripts' whenever possible"?
You cannot just make an anchor tag be treated like a div. Since an anchor is an inline element, you cannot have any block level elements be children of it. And why would you add an inline onmouseover attribute to the div? The whole idea is to avoid having inline events to junk up the mark up. You might as well just use a table for layout. -
- CommentAuthorWithoutReason
- CommentTimeJan 29th 2008
wow... i think i shoud update my css skills too... cause i tried helping but i cant :D
1 to 10 of 10