Jump to content

script change background


Recommended Posts

i m try change background <div> element ... better say only style...


i still dont read all tutorial... but was say javascript can only change elements what exist...


i try make something like this http://www.animedreaming.tv/ some small picture and if mouse at it.. change background



<div id="javaefects"><div id="icone"><img id="logo_1" class="logo" onmouseover="changeImage1()" src="pictureicone bro.png" alt="icone bro"><img id="logo_2" class="logo" onmouseover="changeImage2()" src="pictureicone sister.png" alt="icone sister"><img id="logo_3" class="logo" onmouseover="changeImage3()" src="pictureicone princes.png" alt="icone princes"><img id="logo_4" class="logo" onmouseover="changeImage4()" src="pictureicone ted.png" alt="icone ted"></div></div>


function changeImage1() {   	var element = document.getElementById('javaefects');	//element.background:url('picture/bro.png');	element.innerHTML = "THIS IS SPARTA";}


#javaefects{background:url('picture/no game no life.jpg');background-size:564px 250px;width:564px;height:250px;}

with experiments, i know java rewrite all element and keep only setting what is use at CSS setting, i m use for image css setting and need change only line background:url('picture/no game no life.jpg');


QUESTEN1: can javascript enter at CSS file ???


i was see some example change properity like:

image.src = "pic_bulbon.gif";




QUESTEN2: is posible change HTML background properity only ??? but keep others with CSS like: background-size:564px 250px;


Link to comment
Share on other sites

I don't understand what you want. The background behind an image is usually hidden by the image. Obviously I don't have access to your images.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>tab</title><style>#javaefects{background-image:url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg');width:800px;height:600px;}img.logo{border:10px solid white;border-radius:5px;}</style><script>window.onload = init;function init(){var list = document.getElementsByClassName('logo');for (i=0,len=list.length ; i<len ; i++){list[i].onmouseover = imghover;list[i].onmouseout = imghoverout;}}function imghover() {this.style.borderColor = '#f00';}function imghoverout() {this.style.borderColor = '#fff';}</script></head><body><div id="javaefects"><img id="logo_1" class="logo" src="http://upload.wikimedia.org/wikipedia/commons/c/c5/2011_Super_Rugby_Crusaders_vs_Waratahs_59.jpg" alt="alt1"><img id="logo_2" class="logo" src="http://upload.wikimedia.org/wikipedia/commons/5/5e/200x133px-Biene_auf_lavendel.png" alt="alt2"><img id="logo_3" class="logo" src="http://upload.wikimedia.org/wikipedia/commons/f/fe/28.03.2007_Escher1.jpg" alt="alt3"><img id="logo_4" class="logo" src="http://upload.wikimedia.org/wikipedia/commons/6/6d/3390india.jpg" alt="alt4"></div><a href="http://w3schools.invisionzone.com/index.php?showtopic=50413">Msg Link</a><a href="http://wikitravel.org/en/Java">Island of Java, Indonesia</a></body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...