Multiple rollovers and swap images

HTML & CSS
1

Hi
I am new to this forum and hoping someone can help as I have spent hours on the web trying to find a solution with no luck
So I thought to ask smarter people than myself…

I have one picture at the top approx 450x200(pic a)
Under it I have four buttons A B C D

A B C D are rollover buttons that when mouseover changes 'pic a 'and doesn’t change until u rollover another button
A B C D on click will go to a URL. And 'pic a 'depending on which pic it is will go to a URL (4 different URLS for each pic and 4 URLS for each button)

Hope this makes sense and that this does indeed exist

2

Welcome to SitePoint , Pup.

If you need a click action you will need to use .js as well as CSS. CSS does NOT control events, only styling.
That begin said, and if I understood you correctly this might be close to what you are looking for:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
.imageMenu { 
list-style:none;
padding:200px 0 0 0;
width:400px;
position:relative;
outline:1px solid;
overflow:hidden;

}


.imageMenu .pic   {
	position:absolute;
	 height: 200px;
	 width: 400px;
	 background:pink;
 }

.imageMenu  li { float:left; width:25%;}
.imageMenu  li a { display:block; padding:15px; background: silver }
.imageMenu  li a+a { display:inline; padding:0;  }
.imageMenu  li:hover .pic, .imageMenu  li  .pic {
 	top:0;
	left:0;
}

/* DEFAULT OPTION*/
.imageMenu  li + li .pic   {
	 	top:-99999em;
	left:-99999em;

 }

/* not pART OF THE CONCEPT*/
.imageMenu li + li .pic   {
 	 background:red;
}
.imageMenu li + li + li .pic   {
 	 background:orange;
}
.imageMenu li + li + li + LI .pic   {
 	 background:CYAN;
}


</style>
</head>
<body>
<ul class="imageMenu">
	<li>
    	<a  href="#b1">Link 1</a>
        <a class="pic" href="#a1"><img src="yourImage.jpg"></a>
    </li>
	<li>
    	<a  href="#b4">Link 2</a>
        <a class="pic" href="#a4"><img src="yourImage.jpg"></a>
    </li>
	<li>
    	<a  href="#b4">Link 3</a>
        <a class="pic" href="#a4"><img src="yourImage.jpg"></a>
    </li>
	<li>
    	<a  href="#b4">Link 4</a>
        <a class="pic" href="#a4"><img src="yourImage.jpg"></a>
    </li>
</ul>
</body>
</html>

hope that helps

3

Thank you so much for your reply

I love this site, I have learnt so much and the people here are very helpful

I will try what you sent me and let you know