CSS Image Swapping

[philaphil]

html, for those of you reading along, of relevant section is

<div class="popup" id="popupl"><a href="#"><img src="photo/house1.2.jpg"><span><img src="photo/house1.jpg"></span></a><a 

href="#"><img src="photo/house1.2.jpg"><span>Description Text 2</span></a><a href="#"><img 

src="photo/house1.2.jpg"><span>Description Text 3</span></a><a href="#"><img src="photo/house1.2.jpg"><span>Smile! life is 

good! 4</span></a><a href="#"><img src="photo/house1.2.jpg"><span>Description Text 5</span></a><a href="#"><img 

src="photo/house1.2.jpg"><span>Description Text</span></a></div>
<div class="popup" id="popupr"><a href="#"><img src="photo/house1.2.jpg"><span>Description Text 1</span></a><a href="#"><img 

src="photo/house1.2.jpg"><span>Description Text 3</span></a><a href="#"><img src="photo/house1.2.jpg"><span>Description Text 

6</span></a><a href="#"><img src="photo/house1.2.jpg"><span>Description Text 7</span></a><a href="#"><img 

src="photo/house1.2.jpg"><span>Description Text 6</span></a><a href="#"><img src="photo/house1.2.jpg"><span>Description Text 

3</span></a></div>

[philaphil]

relavent html is:

<div class="popup" id="popupl"><a href="#"><img src="photo/house1.2.jpg"><span><img src="photo/house1.jpg"></span></a><a 

href="#"><img src="photo/house1.2.jpg"><span>Description Text 2</span></a><a href="#"><img 

src="photo/house1.2.jpg"><span>Description Text 3</span></a><a href="#"><img src="photo/house1.2.jpg"><span>Smile! life is 

good! 4</span></a><a href="#"><img src="photo/house1.2.jpg"><span>Description Text 5</span></a><a href="#"><img 

src="photo/house1.2.jpg"><span>Description Text</span></a></div>
<div class="popup" id="popupr"><a href="#"><img src="photo/house1.2.jpg"><span>Description Text 1</span></a><a href="#"><img 

src="photo/house1.2.jpg"><span>Description Text 3</span></a><a href="#"><img src="photo/house1.2.jpg"><span>Description Text 

6</span></a><a href="#"><img src="photo/house1.2.jpg"><span>Description Text 7</span></a><a href="#"><img 

src="photo/house1.2.jpg"><span>Description Text 6</span></a><a href="#"><img src="photo/house1.2.jpg"><span>Description Text 

3</span></a></div>

[Paul O'B]

Hi,

Replace all your css with this and it should look better .

body {
 margin: 0;
 padding: 0;
 background: url(http://home.comcast.net/~tipupp/images/bg1.gif);
}
div#wrap {
 postion: absolute;
 margin-top: 40px;
 margin-left: 100px;
 width: 600px;
 background: white;
 border: 1px solid red;
 z-index: 0;
}
div#header {
 position: relative;
 background-color: #000066;
 color: #ffffff;
 border-top: .15em solid #000066;
 z-index: 1;
}
div#header h1 {
 font-family: Verdana, sans-serif;
 font-size: 200%;
 padding-left: 10px;
 letter-spacing: .2em;
}
div#tabs ul {
 display: block;
 list-style: none outside;
 margin: 0 0 0 10px;
 padding: 0;
 font-family: Verdana, sans-serif;
 font-size: 10px;}
div#tabs li {
 margin: 0 4px 0 0;
 padding: 0;
 border-top: 1px solid #cecbc6;
 border-right: 1px solid #cecbc6;
 border-left: 1px solid #cecbc6;
 background-color: #000066;
 color: #ffffff;
 font-weight: bold;
 display: block;
 float: right;
 position: relative;
 top: -1.32em;
}
div#tabs a:link, div#tabs a:visited {
 background-color: #000066;
 color: #ffffff;
 text-decoration: none;
 padding: 0 1em 0 1em;
}
div#tabs a:hover {
 background-color: #cecbc6;
 color: #000066;
}
span#tabclear {
 display: none;
}
html>body #tabclear {
 display: block;
 clear: both;
}
body.daily #tabs li#tab-daily a, body.house #tabs li#tab-house a, body.favs #tabs li#nav-favs a {
 background-color: #fff;
 color: #000066;
}
.popup { 
 width: 50px;
 height: 300px;
 background: orange;
}
.popup a {
 width: 45px;
 background: green;
}
.popup a span {
 display: none;
 }
.popup a:hover {
 color: #F00;
 text-indent: 0;
 }
.popup span img {
 width: 250px;
 height: 250px;
}
.popup a:hover img {
 border:2px solid red;
}
.popup a:hover span {
 display: block;
 width: 300px;
 height: 258px;
 margin: 0px;
 border: 0px;
 color: red;
 text-align:center;
}
#popupl a:hover span {
 position: absolute;
 top: 10px;
 left: 125px;
}
#popupr a:hover span {
 position: absolute;
 top: 10px;
 left:-375px;
 z-index:160;
}
#popupl {
 position: absolute;
 top: 183px;
 left: 125px;
 z-index: 150;
}
#popupr {
 position: absolute;
 top: 183px;
 left: 625px;
 z-index: 150;
}
div#screen {position: absolute;
 top: 150px;
 left: 200px;
 z-index: 0;
 width: 400px;
 height: 400px;
 background: url(http://home.comcast.net/~tipupp/images/screen.jpg);
}
div#para {
 margin-top: 450px;
}

Paul

[philaphil]

cheesey grin.

thanks a lot! it works fine - i'll post an update to the site here as i perfect the images etc.

phil