2 Replies - 899 Views - Last Post: 29 October 2009 - 08:09 AM

#1 semaz  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 116
  • Joined: 24-November 08

Problem with changing images function

Post icon  Posted 29 October 2009 - 03:44 AM

hi everyone , i'm facing w weird problem with javascript

i'm having 3 images work as 3 buttons , i want to make them when the user clicks on one of them it changes it's image and the image of the other 2 div tags

here's my html code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/javascript" href="js/Javascript.js" />
<script language="javascript" type="text/javascript">
function changeDiv_ToEnglish()
	{
			document.getElementById("english").style.backgroundImage = "url(images/english_bold.jpg)";
			document.getElementById("arabic").style.backgroundImage = "url(images/arabic_light.jpg)";
			document.getElementById("japanese").style.backgroundImage = "url(images/japanese_light.jpg)";
			
	}
   
	function changeDiv_ToArabic()
	{
			document.getElementById("arabic").style.backgroundImage = "url(images/arabic_bold.jpg)";
			document.getElementById("english").style.backgroundImage = "url(images/english_light.jpg)";
			document.getElementById("japanese").style.backgroundImage = "url(images/japanese_light.jpg)";
	}
	
	function changeDiv_ToJapanese()
	{
			document.getElementById("japanese").style.backgroundImage = "url(images/japanese_bold.jpg)";
			document.getElementById("arabic").style.backgroundImage = "url(images/arabic_light.jpg)";
			document.getElementById("english").style.backgroundImage = "url(images/english_light.jpg)";
	}
</script>
<title>Spirit of Islam</title>
</head>

<body>
	<div class="body">
		<div class="banner"></div>
		<div class="leftArea">
		</div>
		<div class="middleArea">
		</div>

[b][size=4]// Here's starts the problem : [/size]
[/b]
		<div class="rightArea">
		  <div class="rightTop">
			<div id="empty"><img src="images/right_top/empty.jpg" /></div>
					<div onclick="changeDiv_ToEnglish()"  id="english"><img src="images/right_top/english_bold.jpg" /></div>
			<div id="arabic" onclick="changeDiv_ToArabic()" ><img src="images/right_top/arabic_light.jpg" /></div>
					<div onclick="changeDiv_ToJapanese()"  id="japanese"><img src="images/right_top/japanese_light.jpg" /></div>
			</div>
		</div>
	</div>
</body>
</html>




and here's my css code for only the 3 divs
@charset "utf-8";
/* CSS Document */


#empty
{
width:69px;
height:40px;
float:left;
}

#english
{
width:62px;
height:40px;
float:left;
}

#arabic
{
width:56px;
height:40px;
float:left;
}

#japanese
{
width:82px;
height:40px;
float:right;
}



The problem is : nothing occurs when i click on the arabic , english , japanese divs

This post has been edited by semaz: 29 October 2009 - 03:46 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Problem with changing images function

#2 arthurakay  Icon User is offline

  • D.I.C Head

Reputation: 22
  • View blog
  • Posts: 226
  • Joined: 17-February 09

Re: Problem with changing images function

Posted 29 October 2009 - 06:14 AM

I'm willing to bet your code works (unless you're getting an error message)... but you're missing something obvious.

Each of your DIVs has an image *tag*... and your script is changing the *background* CSS property. Since the IMG tag sits on top of the background, you'll never see the background change.

So, assuming you want to keep your JS code intact, you need to simply place the images as background images (via CSS) to begin with and remove the IMG tags.

This post has been edited by arthurakay: 29 October 2009 - 06:15 AM

Was This Post Helpful? 0
  • +
  • -

#3 semaz  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 116
  • Joined: 24-November 08

Re: Problem with changing images function

Posted 29 October 2009 - 08:09 AM

oppss :D , yeah man u r right (Y)

thx
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1