asked on

reduce list image swaps

Hi,

I have a few questions lately but I am stuck on this.
I have a few images in a list that swap image on hover. Normal code for such a list is different for a bunch of image swaps as some code doesnt work like ul li a...

I need the images to reduce in size somehow when I resize the browser.
If I can reduce the images with media queries then I will accept this.

Here is an example here. is there any point to having the links in a div and a list?

http://www.mymrt.net/ComputerTraining/test3.html

<style type="text/css">

#swap{
width:100px; height:100px;
	background-image:url(images/ic1b.png); 
  background-repeat: no-repeat; 
  display:block;
}

#swap:hover img{
	visibility:hidden;
/*	opacity:0;*/
} 

#imgswap {
	width:100px; height:100px;
	background-image:url(images/ic1b.png); 
 float:left;
margin-right:20px;
  }
  
#imgswap:hover img {
	visibility:hidden;
/*	opacity:0;*/
	} 
#imgswap2 {
	width:100px; height:100px;
	background-image:url(images/ic1b.png); 
  background-repeat: no-repeat; 
  float:left;
  margin-right:20px;
  }
  
#imgswap2:hover img {
	visibility:hidden;
/*	opacity:0;*/
	} 

#imgswap3 {
	width:100px; height:100px;
	background-image:url(images/ic1b.png); 
  background-repeat: no-repeat; 
  float:left;
  margin-right:20px;
  }
  
#imgswap3:hover img {
	visibility:hidden;
/*	opacity:0;*/
	} 
#imgswap4 {
	width:100px; height:100px;
	background-image:url(images/ic1b.png); 
  background-repeat: no-repeat; 
  float:left;
  margin-right:20px;
  }
  
#imgswap4:hover img {
	visibility:hidden;
/*	opacity:0;*/
	} 
		
	
#head {
	margin:0;
	padding:0;
	position:relative; top:100px;
	text-decoration: none;
	text-align:left;	
}
	#head ul li a
	{
	/*text-decoration: none;
	text-align:left;
	float:left;
	padding-right:10%;*/

	}	
#head ul
{
/*margin-left: 15%;*/
padding:0;

list-style-type: none;

border:none;

}	
</style>
</head>

<body>
dss
<div id="swap">
<img  src="images/ic1.png" alt=”C” />
</div>



<div id="head">
 <ul>
             <li>
<div id="imgswap"> <a href=""><img id="imgswap" src="images/ic1.png" alt=""/></a></div>
 
        
<div id="imgswap2"> <a href=""><img id="imgswap" src="images/ic1.png" alt=""/></a></div>
<div id="imgswap3"> <a href=""><img id="imgswap" src="images/ic1.png" alt=""/></a></div>
 
        
<div id="imgswap4"> <a href=""><img id="imgswap" src="images/ic1.png" alt=""/></a></div>

    </li>
          </ul>
           
</div>

</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial