Pictures Are Overlapping

Page 1 of 1

6 Replies - 408 Views - Last Post: 07 September 2012 - 01:38 PM

#1 qazi54  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 07-September 12

Pictures Are Overlapping

Posted 07 September 2012 - 07:41 AM

What am I doing wrong .Pictures are overlapping?
<!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>
<script language="Javascript" type="text/Javascript">
function showDiv()
		{
			var mySelect = document.getElementById("myselect");
			var myList = document.getElementById("mylist");
			
			switch (mySelect.value)
			{
				case 'J':
						myDiv = document.getElementById("John");
						myList.innerHTML = myDiv.innerHTML;
						myList.style.display = "block"; 		
						break;
						
				case 'P':
						myDiv = document.getElementById("Paul");
						myList.innerHTML = myDiv.innerHTML;
						myList.style.display = "block";			
						break;
						
						
				case 'G':
						myDiv = document.getElementById("George");
						myList.innerHTML = myDiv.innerHTML;
						myList.style.display = "block";			
						break;
						
						
				case 'R':
						myDiv = document.getElementById("Ringo");
						myList.innerHTML = myDiv.innerHTML;
						myList.style.display = "block";			
						break;
			}
		}
		
		function showYellow(event)
		{
			var myyellow = document.getElementById("myyellow");
			myyellow.style.display = "block";
			
		}
		function showpixels(event)
		{
		 	x=event.clientX
			y=event.clientY

			var myMsg = document.getElementById("msg");
			myMsg.innerHTML = "X coords: " + x + ", Y coords: " + y;
		} 

</script>
</head>

<style>
		#selectdiv
		{
			position:absolute;
			left:10px;
			top:10px;
			width:400px;
			height:400px;
		}
		#mylist
		{
			position: absolute;
			left: 200px;
			top: 100px;
			width:inherit;
			height:inherit;
		}
		#myyellow
		{
			position: absolute;
			left: 600px;
			top: 100px;
			width:300px;
			height:200px;
			background-color:#FF3;
		}
	</style>
<body>

	  <div id="selectdiv">
      <h1 style="font-size:28px">Select a Beatle</h1>
      <select name="beatles" size="1" id="myselect" onchange="showDiv();">
	  		<option value="-">-</option>
            <option value="J">John</option>
            <option value="P">Paul</option>
            <option value="G">George</option>
            <option value="R">Ringo</option>
      </select>
      </div>
      <div id="mylist" style="display:none" onmouseover="showYellow(event);" onmouseout="showpixels(event)"></div>
      <div id="John" style="display:none">
      	<img src="beatles_john.jpg" />
      </div>
      <div id="Paul" style="display:none">
      	<img src="beatles_paul.jpg"  />
      </div>
      <div id="George" style="display:none">
      	<img src="beatles_george.jpg" />
      </div>
      <div id="Ringo" style="display:none">
      	<img src="beatles_ringo.jpg" />
      </div>
	  <div id="myyellow" style="display:none"></div>
      <div id="msg"></div>
      

<script language="Javascript" type="text/Javascript">
<!-- PRELOAD IMAGES

image1 = new Image();
image1.src = "beatles_john.jpg";

image2 = new Image();
image2.src = "beatles_ringo.jpg";


</script>




<A HREF="http://profperry.com/Classes20/Javascript/beatles_john.jpg" onmouseover="image1.src='beatles_john.jpg';"
onmouseout="image1.src='beatles_paul.jpg';">
<img name="image1" src="beatles_paul.jpg" border="0"></a>

<A HREF="http://profperry.com/Classes20/Javascript/beatles_paul.jpg" onmouseover="image2.src='beatles_ringo.jpg';"
onmouseout="image2.src='beatles_george.jpg';">
<img name="image2" src="beatles_george.jpg" border="0"></a>

</body>

Attached File(s)

  • Attached File  java1.htm (3.48K)
    Number of downloads: 20

This post has been edited by macosxnerd101: 07 September 2012 - 07:43 AM
Reason for edit:: Please use code tags and a descriptive title


Is This A Good Question/Topic? 0
  • +

Replies To: Pictures Are Overlapping

#2 macosxnerd101  Icon User is offline

  • Self-Trained Economist
  • member icon




Reputation: 9025
  • View blog
  • Posts: 33,462
  • Joined: 27-December 08

Re: Pictures Are Overlapping

Posted 07 September 2012 - 07:44 AM

Moved to Javascript. Please note that Java != Javascript.
Was This Post Helpful? 0
  • +
  • -

#3 jon.kiparsky  Icon User is offline

  • Pancakes!
  • member icon

Reputation: 5421
  • View blog
  • Posts: 8,705
  • Joined: 19-March 11

Re: Pictures Are Overlapping

Posted 07 September 2012 - 07:44 AM

javascript != java
Was This Post Helpful? 0
  • +
  • -

#4 qazi54  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 07-September 12

Re: Pictures Are Overlapping

Posted 07 September 2012 - 08:48 AM

I want to Code a web page using Javascript so that it displays like so.When the mouser pointer goes over any Beatle image have a yellow div appear just to the right
of the image and centered on the left-side like so...Please help

<!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>
<script language="Javascript" type="text/Javascript">
function showDiv()
		{
			var mySelect = document.getElementById("myselect");
			var myList = document.getElementById("mylist");
			
			switch (mySelect.value)
			{
				case 'J':
						myDiv = document.getElementById("John");
						myList.innerHTML = myDiv.innerHTML;
						myList.style.display = "block"; 		
						break;
						
				case 'P':
						myDiv = document.getElementById("Paul");
						myList.innerHTML = myDiv.innerHTML;
						myList.style.display = "block";			
						break;
						
						
				case 'G':
						myDiv = document.getElementById("George");
						myList.innerHTML = myDiv.innerHTML;
						myList.style.display = "block";			
						break;
						
						
				case 'R':
						myDiv = document.getElementById("Ringo");
						myList.innerHTML = myDiv.innerHTML;
						myList.style.display = "block";			
						break;
			}
		}
		
		function showYellow(event)
		{
			var myyellow = document.getElementById("myyellow");
			myyellow.style.display = "block";
			
		}
		function showpixels(event)
		{
		 	x=event.clientX
			y=event.clientY

			var myMsg = document.getElementById("msg");
			myMsg.innerHTML = "X coords: " + x + ", Y coords: " + y;
		} 

</script>
</head>

<style>
		#selectdiv
		{
			position:absolute;
			left:10px;
			top:10px;
			width:400px;
			height:400px;
		}
		#mylist
		{
			position: absolute;
			left: 200px;
			top: 100px;
			width:inherit;
			height:inherit;
		}
		#myyellow
		{
			position: absolute;
			left: 600px;
			top: 100px;
			width:300px;
			height:200px;
			background-color:#FF3;
		}
	</style>
<body>

	  <div id="selectdiv">
      <h1 style="font-size:28px">Select a Beatle</h1>
      <select name="beatles" size="1" id="myselect" onchange="showDiv();">
	  		<option value="-">-</option>
            <option value="J">John</option>
            <option value="P">Paul</option>
            <option value="G">George</option>
            <option value="R">Ringo</option>
      </select>
      </div>
      <div id="mylist" style="display:none" onmouseover="showYellow(event);" onmouseout="showpixels(event)"></div>
      <div id="John" style="display:none">
      	<img src="beatles_john.jpg" />
      </div>
      <div id="Paul" style="display:none">
      	<img src="beatles_paul.jpg"  />
      </div>
      <div id="George" style="display:none">
      	<img src="beatles_george.jpg" />
      </div>
      <div id="Ringo" style="display:none">
      	<img src="beatles_ringo.jpg" />
      </div>
	  <div id="myyellow" style="display:none"></div>
      <div id="msg"></div>
      

<script language="Javascript" type="text/Javascript">
<!-- PRELOAD IMAGES

image1 = new Image();
image1.src = "beatles_john.jpg";

image2 = new Image();
image2.src = "beatles_ringo.jpg";


</script>




<A HREF="http://profperry.com/Classes20/Javascript/beatles_john.jpg" onmouseover="image1.src='beatles_john.jpg';"
onmouseout="image1.src='beatles_paul.jpg';">
<img name="image1" src="beatles_paul.jpg" border="0"></a>

<A HREF="http://profperry.com/Classes20/Javascript/beatles_paul.jpg" onmouseover="image2.src='beatles_ringo.jpg';"
onmouseout="image2.src='beatles_george.jpg';">
<img name="image2" src="beatles_george.jpg" border="0"></a>

</body>

This post has been edited by Atli: 07 September 2012 - 08:50 AM
Reason for edit:: Use [code] tags when posting code.

Was This Post Helpful? 0
  • +
  • -

#5 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3039
  • View blog
  • Posts: 4,548
  • Joined: 08-June 10

Re: Pictures Are Overlapping

Posted 07 September 2012 - 09:00 AM

Your CSS styles are absolutely positioning them to be exactly where they are. If you don't want them to overlap, then change their positions.
Was This Post Helpful? 0
  • +
  • -

#6 qazi54  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 07-September 12

Re: Pictures Are Overlapping

Posted 07 September 2012 - 09:02 AM

How can I do that.I want the pivtures appear one by one when the names are clicked
Was This Post Helpful? 0
  • +
  • -

#7 JackOfAllTrades  Icon User is online

  • Saucy!
  • member icon

Reputation: 5662
  • View blog
  • Posts: 22,505
  • Joined: 23-August 08

Re: Pictures Are Overlapping

Posted 07 September 2012 - 01:38 PM

Merged duplicate topics. Don't create a new topic when you already have one on the same problem.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1