www.webdeveloper.com
Results 1 to 5 of 5

Thread: Need help with image rollover.

  1. #1
    Join Date
    Nov 2008
    Posts
    7

    Need help with image rollover.

    Hello JS Experts,

    I am a new web designer and trying to use image rollover.

    I am trying to use this JS script:
    http://www.java-scripts.net/javascri...r-Script.phtml

    I am providing here 2 links.

    xhttp://www.lifestyledate.com/test/index1.html <-- Only 1 image link and works perfectly.

    http://www.lifestyledate.com/test/index.html <-- 2 image links and doesnt work at all.


    If you see the default script:

    <script language="Javascript">
    <!--
    //Slide Show script (this notice must stay intact)
    //For this and more scripts
    //visit java-scripts.net or http://wsabstract.com

    if (document.images) {
    button1 = new Image
    button2 = new Image

    button1.src = 'img1.gif'
    button2.src = 'img2.gif'
    }
    //-->
    </script>

    I have changed the img1.gif and img2.gif to camera1.gif and camera.gif.

    then

    I added button3.src = 'video1.gif'
    and button4.src = 'video.gif'


    Then in the html body:
    <a href="http://java-scripts.net" onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src"><img src="img1.gif" border=0 name="rollover" /></a>

    I have changed the img1.gif to camera1.gif.

    Then i copied this same row for the second link and this is what i did:

    <a href="http://java-scripts.net" onmouseover="document.rollover.src=button4.src" onmouseout="document.rollover.src=button1.src"><img src="video1.gif" border=0 name="rollover" /></a>

    and as you can see change button2.src to button3.src and img1.gif to video1.gif.


    Now, i dont know much js at all, so I might be doing this all wrong. The bad thing is that there were no directions to follow.

    If you know how to help me get this to work, or even know of a better script, please let me know.


    Thank you very much in advance,
    Gil Alon

  2. #2
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726
    I made a number of changes to your page first. You had an extra meta content type tag which had to go, also I changed the img's to id's instead of names (and I changed the id's also to be different). I also moved the mouseovers and mouseouts into the img tags instead of the 'a' tags, and removed border properties from the img's and declared them as 0 for all img's in the css. Also added title= properties to the img's, as only Internet Explorer [incorrectly] displays alt text in the tooltips, the title= property is the correct way to show text in tooltips and will work in all browsers whereas alt text won't show in tooltips in other browsers (but alt="" is still required!).
    See further notes inside the script in the page:


    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=ISO-8859-1" />
    <title>Daniel S. Alon</title>
    <script type="text/javascript">
    /*** Add as many pic paths to the rollPics array as you want, just continue to follow the format and observe syntax. ***/
    var rollPics = new Array();
    rollPics[0] = 'camera1.gif';
    rollPics[1] = 'camera.gif';
    rollPics[2] = 'video1.gif';
    rollPics[3] = 'video.gif';
    
    var preLoadPics = new Array();
    /*** This will pre-load the pics, so you don't have to declare new Image every time you add more pics to the rollPics array, as this 'for' loop will run through the rollPics array and do it for you. ***/
    for (var i = 0; i < rollPics.length; i++) {
    preLoadPics[i] = new Image();
    preLoadPics[i].src = rollPics[i];
    }
    
    /*** When you call this rollOver function from the page, send it two parameters. elemID is the id of the image to change. When changing the image the mouse is over, the image should be assigned an id and then just pass (this.id) as you will see below. If you want to change a different image than the one the mouse is over, pass an id in single quotes. The second parameter, which, pass a number that is the number of the pic in the rollPics array that you would like to show. examples: onmouseover="rollOver(this.id,1);" -use that when the current image has an id, or: onmouseover="rollOver('rollImg2',3);" -if you want to send a different id.***/
    
    function rollOver(elemID,which){
    document.getElementById(elemID).src = preLoadPics[which].src;
    }
    </script>
    <style type="text/css">
    
    body {
    	border-left:		1px black solid;
    	border-right:		1px black solid;
    	background-color:	#f2fefe;
    	background-image:	url(background1.jpg);
    	width:		90%;
    	margin:		auto;
    	text-align:	center;
    } 
    
    #div1 {
    
    	border-top:		1px black solid;
    	width:		100%
    	height:		130px;
    	margin:		10px 0px 0px 0px;
    }
    
    #div2 {
    
    	width:		100%;
    	height:		200px;	
    	text-align:	center;
    }
    	#div3 {
    
    	width: 			30%;
    	margin:		2px 0px 2px 0px;
    	height:			191px;
    	float:			left;
    	}
    
    	#div4 {
    
    	width: 			55%;
    	margin:		2px 0px 2px 0px;
    	height:			191px;
    	float:			right;
    	}
    
    		#div5 {
    		width:			49%;
    		height:			189px;
    		float:			left;
    		margin:			50px 1px 1px 1px;	
    	        }
    
    		#div5 img {border:0px;}
    		
    		#div6 {
    		width:			49%;
    		height:			189px;
    		float:			right;
    		margin:			37px 1px 1px 1px;	
    		}
    		#div6 img {border:0px;}
    		
    #div7 {
    
    	padding:	0px 10px 0px 10px;
    	text-align:		left;
    	height:			180px;
    }
    
    #div7 h2 {
    	color:black;
    }
    	
    #div8 {
    	border-top:		1px black solid;
    	border-bottom:		1px black solid;
    	text-align:		center;
    	width:			100%;
    	height:			60px;
    	}
    
    img { border:0; }
    
       </style>
    </head> 
    
    <body> 
    <div id="allcontent">
    <div id="div1">
    <img src="logo1.gif" width="750" alt="logo" title="" />
    </div>
    <div id="div2">
    
    	<div id="div3">
    	<img src="daniel.gif" width="276" height="190" alt="daniel.gif" title="Daniel Sky Diving" />
    	</div>
    	<div id="div4">
    		<div id="div5">
    <a href="photos.html">
    <img src="camera1.gif" alt="camera1.gif" id="rollImg1" onmouseover="rollOver(this.id,1);" onmouseout="rollOver(this.id,0);" title="View More Pics!" />
    </a><br />
    
    		</div>
    		<div id="div6">
    <a href="photos.html">
    <img src="video1.gif" alt="video1.gif" id="rollImg2" onmouseover="rollOver(this.id,3);" onmouseout="rollOver(this.id,2);" title="View Baby Videos!" /></a><br />
    	</div>
    	</div>
    </div>	
    <div id="div7">
    <h2>Updates as of Nov 20th, 2008:</h2>
    <p>Daniel is now 6 months old. He started laughing with voice recently. His 	eyes are still Green/Hazel and they change with changes in light. Daniel also started 	to eat 	recently Rice oatmeal and he loves it like crazy. He makes these weird noises 	while 	eating. That is all for this update. See you guys soon!</p>
    </div>
    <div id="div8">
    <p>This website was designed for the purpose of showing off our little boy's pictures and videos.<br />
    	All Rights Are Reserved.<br />
    	Copyright 2008 (C)</p>
    </div>
    </div>
    </body>
    </html>
    And congrads on the cute kid!!

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    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">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Daniel S. Alon</title>
    <script language="Javascript">
    <!--
    //Slide Show script (this notice must stay intact)
    //For this and more scripts
    //visit java-scripts.net or http://wsabstract.com
    
    if (document.images) {
         button1 = new Image
         button2 = new Image
         button3 = new Image
         button4 = new Image
    
         button1.src = 'http://www.lifestyledate.com/test/camera1.gif'
         button2.src = 'http://www.lifestyledate.com/test/camera.gif'
         button3.src = 'http://www.lifestyledate.com/test/video1.gif'
         button4.src = 'http://www.lifestyledate.com/test/video.gif'
    }
    //-->
    </script>
        <style type="text/css">
    
    body {
    	border-left:		1px black solid;
    	border-right:		1px black solid;
    	background-color:	#f2fefe;
    	background-image:	url(http://www.lifestyledate.com/test/background1.jpg);
    	width:		90%;
    	margin:		auto;
    	text-align:	center;
    }
    
    
    
    #div1 {
    
    	border-top:		1px black solid;
    	width:		100%
    	height:		130px;
    	margin:		10px 0px 0px 0px;
    }
    
    #div2 {
    
    	width:		100%;
    	height:		200px;
    	text-align:	center;
    }
    	#div3 {
    
    	width: 			30%;
    	margin:		2px 0px 2px 0px;
    	height:			191px;
    	float:			left;
    	}
    
    	#div4 {
    
    	width: 			55%;
    	margin:		2px 0px 2px 0px;
    	height:			191px;
    	float:			right;
    	}
    
    		#div5 {
    		width:			49%;
    		height:			189px;
    		float:			left;
    		margin:			50px 1px 1px 1px;
    	        }
    
    		#div5 img {border:0px;}
    
    		#div6 {
    		width:			49%;
    		height:			189px;
    		float:			right;
    		margin:			37px 1px 1px 1px;
    		}
    		#div6 img {border:0px;}
    
    #div7 {
    
    	padding:	0px 10px 0px 10px;
    	text-align:		left;
    	height:			180px;
    }
    
    #div7 h2 {
    	color:black;
    }
    
    #div8 {
    	border-top:		1px black solid;
    	border-bottom:		1px black solid;
    	text-align:		center;
    	width:			100%;
    	height:			60px;
    	}
    
    
    
    
       </style>
    </head>
    
    <body>
    
    <div id="allcontent">
    <div id="div1">
    <img src="http://www.lifestyledate.com/test/logo1.gif" width="750" alt="logo" />
    </div>
    <div id="div2">
    
    	<div id="div3">
    	<img src="http://www.lifestyledate.com/test/daniel.gif" width="276" height="190" alt="Daniel Sky Diving" />
    	</div>
    	<div id="div4">
    		<div id="div5">
    <a href="photos.html" onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src"><img src="http://www.lifestyledate.com/test/camera1.gif" border=0 name="rollover" /></a><br />
    
    		</div>
    		<div id="div6">
    <a href="photos.html" onmouseover="document.rollover1.src=button4.src" onmouseout="document.rollover1.src=button3.src"><img src="http://www.lifestyledate.com/test/video1.gif" border=0 name="rollover1" /></a><br />
    	</div>
    	</div>
    </div>
    <div id="div7">
    <h2>Updates as of Nov 20th, 2008:</h2>
    <p>Daniel is now 6 months old. He started laughing with voice recently. His 	eyes are still Green/Hazel and they change with changes in light. Daniel also started 	to eat 	recently Rice oatmeal and he loves it like crazy. He makes these weird noises 	while 	eating. That is all for this update. See you guys soon!</p>
    </div>
    
    <div id="div8">
    This website was designed for the purpose of showing off our little boy's 	pictures and videos.<br />
    	All Rights Are Reserved.<br />
    	Copyright 2008 (C)</p>
    </div>
    </div>
    </body>
    </html>
    but better

    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">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Daniel S. Alon</title>
    <script language="Javascript">
    <!--
    //Slide Show script (this notice must stay intact)
    //For this and more scripts
    //visit java-scripts.net or http://wsabstract.com
    
    if (document.images) {
         button2 = new Image
         button4 = new Image
    
         button2.src = 'http://www.lifestyledate.com/test/camera.gif'
         button4.src = 'http://www.lifestyledate.com/test/video.gif'
    }
    
    function Swap(obj,src){
     if (!obj.save) obj.save=obj.src;
     obj.src=src||obj.save;
    }
    
    //-->
    </script>
    <style type="text/css">
    
    body {
    	border-left:		1px black solid;
    	border-right:		1px black solid;
    	background-color:	#f2fefe;
    	background-image:	url(http://www.lifestyledate.com/test/background1.jpg);
    	width:		90%;
    	margin:		auto;
    	text-align:	center;
    }
    
    
    
    #div1 {
    
    	border-top:		1px black solid;
    	width:		100%
    	height:		130px;
    	margin:		10px 0px 0px 0px;
    }
    
    #div2 {
    
    	width:		100%;
    	height:		200px;
    	text-align:	center;
    }
    	#div3 {
    
    	width: 			30%;
    	margin:		2px 0px 2px 0px;
    	height:			191px;
    	float:			left;
    	}
    
    	#div4 {
    
    	width: 			55%;
    	margin:		2px 0px 2px 0px;
    	height:			191px;
    	float:			right;
    	}
    
    		#div5 {
    		width:			49%;
    		height:			189px;
    		float:			left;
    		margin:			50px 1px 1px 1px;
    	        }
    
    		#div5 img {border:0px;}
    
    		#div6 {
    		width:			49%;
    		height:			189px;
    		float:			right;
    		margin:			37px 1px 1px 1px;
    		}
    		#div6 img {border:0px;}
    
    #div7 {
    
    	padding:	0px 10px 0px 10px;
    	text-align:		left;
    	height:			180px;
    }
    
    #div7 h2 {
    	color:black;
    }
    
    #div8 {
    	border-top:		1px black solid;
    	border-bottom:		1px black solid;
    	text-align:		center;
    	width:			100%;
    	height:			60px;
    	}
    
    
    
    
       </style>
    </head>
    
    <body>
    
    <div id="allcontent">
    <div id="div1">
    <img src="http://www.lifestyledate.com/test/logo1.gif" width="750" alt="logo" />
    </div>
    <div id="div2">
    
    	<div id="div3">
    	<img src="http://www.lifestyledate.com/test/daniel.gif" width="276" height="190" alt="Daniel Sky Diving" />
    	</div>
    	<div id="div4">
    		<div id="div5">
    <a href="photos.html" ><img src="http://www.lifestyledate.com/test/camera1.gif" border=0 name="rollover" onmouseover="Swap(this,button2.src);" onmouseout="Swap(this);"/></a><br />
    
    		</div>
    		<div id="div6">
    <a href="photos.html" ><img src="http://www.lifestyledate.com/test/video1.gif" border=0 name="rollover1"  onmouseover="Swap(this,button4.src);" onmouseout="Swap(this);"/></a><br />
    	</div>
    	</div>
    </div>
    <div id="div7">
    <h2>Updates as of Nov 20th, 2008:</h2>
    <p>Daniel is now 6 months old. He started laughing with voice recently. His 	eyes are still Green/Hazel and they change with changes in light. Daniel also started 	to eat 	recently Rice oatmeal and he loves it like crazy. He makes these weird noises 	while 	eating. That is all for this update. See you guys soon!</p>
    </div>
    
    <div id="div8">
    This website was designed for the purpose of showing off our little boy's 	pictures and videos.<br />
    	All Rights Are Reserved.<br />
    	Copyright 2008 (C)</p>
    </div>
    </div>
    </body>
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Nov 2008
    Posts
    7
    Quote Originally Posted by astupidname View Post
    I made a number of changes to your page first. You had an extra meta content type tag which had to go, also I changed the img's to id's instead of names (and I changed the id's also to be different). I also moved the mouseovers and mouseouts into the img tags instead of the 'a' tags, and removed border properties from the img's and declared them as 0 for all img's in the css. Also added title= properties to the img's, as only Internet Explorer [incorrectly] displays alt text in the tooltips, the title= property is the correct way to show text in tooltips and will work in all browsers whereas alt text won't show in tooltips in other browsers (but alt="" is still required!).
    See further notes inside the script in the page:


    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=ISO-8859-1" />
    <title>Daniel S. Alon</title>
    <script type="text/javascript">
    /*** Add as many pic paths to the rollPics array as you want, just continue to follow the format and observe syntax. ***/
    var rollPics = new Array();
    rollPics[0] = 'camera1.gif';
    rollPics[1] = 'camera.gif';
    rollPics[2] = 'video1.gif';
    rollPics[3] = 'video.gif';
    
    var preLoadPics = new Array();
    /*** This will pre-load the pics, so you don't have to declare new Image every time you add more pics to the rollPics array, as this 'for' loop will run through the rollPics array and do it for you. ***/
    for (var i = 0; i < rollPics.length; i++) {
    preLoadPics[i] = new Image();
    preLoadPics[i].src = rollPics[i];
    }
    
    /*** When you call this rollOver function from the page, send it two parameters. elemID is the id of the image to change. When changing the image the mouse is over, the image should be assigned an id and then just pass (this.id) as you will see below. If you want to change a different image than the one the mouse is over, pass an id in single quotes. The second parameter, which, pass a number that is the number of the pic in the rollPics array that you would like to show. examples: onmouseover="rollOver(this.id,1);" -use that when the current image has an id, or: onmouseover="rollOver('rollImg2',3);" -if you want to send a different id.***/
    
    function rollOver(elemID,which){
    document.getElementById(elemID).src = preLoadPics[which].src;
    }
    </script>
    <style type="text/css">
    
    body {
    	border-left:		1px black solid;
    	border-right:		1px black solid;
    	background-color:	#f2fefe;
    	background-image:	url(background1.jpg);
    	width:		90%;
    	margin:		auto;
    	text-align:	center;
    } 
    
    #div1 {
    
    	border-top:		1px black solid;
    	width:		100%
    	height:		130px;
    	margin:		10px 0px 0px 0px;
    }
    
    #div2 {
    
    	width:		100%;
    	height:		200px;	
    	text-align:	center;
    }
    	#div3 {
    
    	width: 			30%;
    	margin:		2px 0px 2px 0px;
    	height:			191px;
    	float:			left;
    	}
    
    	#div4 {
    
    	width: 			55%;
    	margin:		2px 0px 2px 0px;
    	height:			191px;
    	float:			right;
    	}
    
    		#div5 {
    		width:			49%;
    		height:			189px;
    		float:			left;
    		margin:			50px 1px 1px 1px;	
    	        }
    
    		#div5 img {border:0px;}
    		
    		#div6 {
    		width:			49%;
    		height:			189px;
    		float:			right;
    		margin:			37px 1px 1px 1px;	
    		}
    		#div6 img {border:0px;}
    		
    #div7 {
    
    	padding:	0px 10px 0px 10px;
    	text-align:		left;
    	height:			180px;
    }
    
    #div7 h2 {
    	color:black;
    }
    	
    #div8 {
    	border-top:		1px black solid;
    	border-bottom:		1px black solid;
    	text-align:		center;
    	width:			100%;
    	height:			60px;
    	}
    
    img { border:0; }
    
       </style>
    </head> 
    
    <body> 
    <div id="allcontent">
    <div id="div1">
    <img src="logo1.gif" width="750" alt="logo" title="" />
    </div>
    <div id="div2">
    
    	<div id="div3">
    	<img src="daniel.gif" width="276" height="190" alt="daniel.gif" title="Daniel Sky Diving" />
    	</div>
    	<div id="div4">
    		<div id="div5">
    <a href="photos.html">
    <img src="camera1.gif" alt="camera1.gif" id="rollImg1" onmouseover="rollOver(this.id,1);" onmouseout="rollOver(this.id,0);" title="View More Pics!" />
    </a><br />
    
    		</div>
    		<div id="div6">
    <a href="photos.html">
    <img src="video1.gif" alt="video1.gif" id="rollImg2" onmouseover="rollOver(this.id,3);" onmouseout="rollOver(this.id,2);" title="View Baby Videos!" /></a><br />
    	</div>
    	</div>
    </div>	
    <div id="div7">
    <h2>Updates as of Nov 20th, 2008:</h2>
    <p>Daniel is now 6 months old. He started laughing with voice recently. His 	eyes are still Green/Hazel and they change with changes in light. Daniel also started 	to eat 	recently Rice oatmeal and he loves it like crazy. He makes these weird noises 	while 	eating. That is all for this update. See you guys soon!</p>
    </div>
    <div id="div8">
    <p>This website was designed for the purpose of showing off our little boy's pictures and videos.<br />
    	All Rights Are Reserved.<br />
    	Copyright 2008 (C)</p>
    </div>
    </div>
    </body>
    </html>
    And congrads on the cute kid!!


    Oh My god aStupidname!!! You rock!

    First of all thanks on the remarks on my baby boy! He is amazing.

    Second,
    I just copied and pasted and it works fine. I started to learn javascript really recently and I am nowhere near to understand what you did there, but I am sure at least some of it will be understandable in the near future
    Do you recommend any particular books or any tips to learn Javascript so I have the best foundation? I am currently using Head First Javascript by oreily.
    Also, bare in mind that I never did any coding what so ever . I do have a good foundation for xhtml, css I think. But i guess you will be he judge for that

    Thank you so much again for your help and looking forward to hearing some tips if you have some.

    Take care,
    Gil

  5. #5
    Join Date
    Nov 2008
    Posts
    7
    Quote Originally Posted by vwphillips View Post
    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">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Daniel S. Alon</title>
    <script language="Javascript">
    <!--
    //Slide Show script (this notice must stay intact)
    //For this and more scripts
    //visit java-scripts.net or http://wsabstract.com
    
    if (document.images) {
         button1 = new Image
         button2 = new Image
         button3 = new Image
         button4 = new Image
    
         button1.src = 'http://www.lifestyledate.com/test/camera1.gif'
         button2.src = 'http://www.lifestyledate.com/test/camera.gif'
         button3.src = 'http://www.lifestyledate.com/test/video1.gif'
         button4.src = 'http://www.lifestyledate.com/test/video.gif'
    }
    //-->
    </script>
        <style type="text/css">
    
    body {
    	border-left:		1px black solid;
    	border-right:		1px black solid;
    	background-color:	#f2fefe;
    	background-image:	url(http://www.lifestyledate.com/test/background1.jpg);
    	width:		90%;
    	margin:		auto;
    	text-align:	center;
    }
    
    
    
    #div1 {
    
    	border-top:		1px black solid;
    	width:		100%
    	height:		130px;
    	margin:		10px 0px 0px 0px;
    }
    
    #div2 {
    
    	width:		100%;
    	height:		200px;
    	text-align:	center;
    }
    	#div3 {
    
    	width: 			30%;
    	margin:		2px 0px 2px 0px;
    	height:			191px;
    	float:			left;
    	}
    
    	#div4 {
    
    	width: 			55%;
    	margin:		2px 0px 2px 0px;
    	height:			191px;
    	float:			right;
    	}
    
    		#div5 {
    		width:			49%;
    		height:			189px;
    		float:			left;
    		margin:			50px 1px 1px 1px;
    	        }
    
    		#div5 img {border:0px;}
    
    		#div6 {
    		width:			49%;
    		height:			189px;
    		float:			right;
    		margin:			37px 1px 1px 1px;
    		}
    		#div6 img {border:0px;}
    
    #div7 {
    
    	padding:	0px 10px 0px 10px;
    	text-align:		left;
    	height:			180px;
    }
    
    #div7 h2 {
    	color:black;
    }
    
    #div8 {
    	border-top:		1px black solid;
    	border-bottom:		1px black solid;
    	text-align:		center;
    	width:			100%;
    	height:			60px;
    	}
    
    
    
    
       </style>
    </head>
    
    <body>
    
    <div id="allcontent">
    <div id="div1">
    <img src="http://www.lifestyledate.com/test/logo1.gif" width="750" alt="logo" />
    </div>
    <div id="div2">
    
    	<div id="div3">
    	<img src="http://www.lifestyledate.com/test/daniel.gif" width="276" height="190" alt="Daniel Sky Diving" />
    	</div>
    	<div id="div4">
    		<div id="div5">
    <a href="photos.html" onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src"><img src="http://www.lifestyledate.com/test/camera1.gif" border=0 name="rollover" /></a><br />
    
    		</div>
    		<div id="div6">
    <a href="photos.html" onmouseover="document.rollover1.src=button4.src" onmouseout="document.rollover1.src=button3.src"><img src="http://www.lifestyledate.com/test/video1.gif" border=0 name="rollover1" /></a><br />
    	</div>
    	</div>
    </div>
    <div id="div7">
    <h2>Updates as of Nov 20th, 2008:</h2>
    <p>Daniel is now 6 months old. He started laughing with voice recently. His 	eyes are still Green/Hazel and they change with changes in light. Daniel also started 	to eat 	recently Rice oatmeal and he loves it like crazy. He makes these weird noises 	while 	eating. That is all for this update. See you guys soon!</p>
    </div>
    
    <div id="div8">
    This website was designed for the purpose of showing off our little boy's 	pictures and videos.<br />
    	All Rights Are Reserved.<br />
    	Copyright 2008 (C)</p>
    </div>
    </div>
    </body>
    </html>
    but better

    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">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Daniel S. Alon</title>
    <script language="Javascript">
    <!--
    //Slide Show script (this notice must stay intact)
    //For this and more scripts
    //visit java-scripts.net or http://wsabstract.com
    
    if (document.images) {
         button2 = new Image
         button4 = new Image
    
         button2.src = 'http://www.lifestyledate.com/test/camera.gif'
         button4.src = 'http://www.lifestyledate.com/test/video.gif'
    }
    
    function Swap(obj,src){
     if (!obj.save) obj.save=obj.src;
     obj.src=src||obj.save;
    }
    
    //-->
    </script>
    <style type="text/css">
    
    body {
    	border-left:		1px black solid;
    	border-right:		1px black solid;
    	background-color:	#f2fefe;
    	background-image:	url(http://www.lifestyledate.com/test/background1.jpg);
    	width:		90%;
    	margin:		auto;
    	text-align:	center;
    }
    
    
    
    #div1 {
    
    	border-top:		1px black solid;
    	width:		100%
    	height:		130px;
    	margin:		10px 0px 0px 0px;
    }
    
    #div2 {
    
    	width:		100%;
    	height:		200px;
    	text-align:	center;
    }
    	#div3 {
    
    	width: 			30%;
    	margin:		2px 0px 2px 0px;
    	height:			191px;
    	float:			left;
    	}
    
    	#div4 {
    
    	width: 			55%;
    	margin:		2px 0px 2px 0px;
    	height:			191px;
    	float:			right;
    	}
    
    		#div5 {
    		width:			49%;
    		height:			189px;
    		float:			left;
    		margin:			50px 1px 1px 1px;
    	        }
    
    		#div5 img {border:0px;}
    
    		#div6 {
    		width:			49%;
    		height:			189px;
    		float:			right;
    		margin:			37px 1px 1px 1px;
    		}
    		#div6 img {border:0px;}
    
    #div7 {
    
    	padding:	0px 10px 0px 10px;
    	text-align:		left;
    	height:			180px;
    }
    
    #div7 h2 {
    	color:black;
    }
    
    #div8 {
    	border-top:		1px black solid;
    	border-bottom:		1px black solid;
    	text-align:		center;
    	width:			100%;
    	height:			60px;
    	}
    
    
    
    
       </style>
    </head>
    
    <body>
    
    <div id="allcontent">
    <div id="div1">
    <img src="http://www.lifestyledate.com/test/logo1.gif" width="750" alt="logo" />
    </div>
    <div id="div2">
    
    	<div id="div3">
    	<img src="http://www.lifestyledate.com/test/daniel.gif" width="276" height="190" alt="Daniel Sky Diving" />
    	</div>
    	<div id="div4">
    		<div id="div5">
    <a href="photos.html" ><img src="http://www.lifestyledate.com/test/camera1.gif" border=0 name="rollover" onmouseover="Swap(this,button2.src);" onmouseout="Swap(this);"/></a><br />
    
    		</div>
    		<div id="div6">
    <a href="photos.html" ><img src="http://www.lifestyledate.com/test/video1.gif" border=0 name="rollover1"  onmouseover="Swap(this,button4.src);" onmouseout="Swap(this);"/></a><br />
    	</div>
    	</div>
    </div>
    <div id="div7">
    <h2>Updates as of Nov 20th, 2008:</h2>
    <p>Daniel is now 6 months old. He started laughing with voice recently. His 	eyes are still Green/Hazel and they change with changes in light. Daniel also started 	to eat 	recently Rice oatmeal and he loves it like crazy. He makes these weird noises 	while 	eating. That is all for this update. See you guys soon!</p>
    </div>
    
    <div id="div8">
    This website was designed for the purpose of showing off our little boy's 	pictures and videos.<br />
    	All Rights Are Reserved.<br />
    	Copyright 2008 (C)</p>
    </div>
    </div>
    </body>
    </html>
    vwphilips,

    Thank you very much for helping me with the issue.
    Have a great one!

    Gil

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles