How to create disjointed image-text rollover (CSS or JavaScript)?

M

Meli

New Member
Hi.

Already for days I'm trying to create seemingly simple rollover:
Rollover constructed from picture and text beneath it (in seperated divs),
with objective to change text color when pointer is located over the image as well as text itself.
Here is example which describes current situation. You are welcome to have a look...
http://www.webdesignerforum.co.uk/index.php?app=core&module=attach&section=attach&attach_id=4612

I allready looked through the internet and DW's FAQ, but didn't find anything for exactly this situation.

Any help will be appreciated!

Thanks,
K.
 
M

Meli

New Member
Hi, stjohn!
Thanks for response, but it seems that your offered tutorial is not quite what I meant. It deals with picture files which at the end makes disjointed rollover, but I must to create one with text:
Sorry for broken link,
here is the content of it:

HTML: 
<!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=utf-8" />
<title>Disjoint rollover help request example</title>

<style type="text/css">
<!--
body {
	font-family: Verdana, Tahoma, Geneva, sans-serif;
	font-size: 11px;
	background-color: #CCC;
}

#wrapper {
	padding: 0px;
	height: 480px;
	width: 640px;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}
#content {
	margin: auto;
	padding: 0px;
	height: 395px;
	width: 640px;
	background-color: #FFF;
}
#footer {
	padding: 0px;
	height: 80px;
	width: 640px;
	margin-top: 5px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	background-color: #FFF;
}
#container {
	height: 140px;
	width: 105px;
	display: block;
	margin: auto;
	padding-top: 120px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#conteiner-image {
	margin: auto;
	padding: 0px;
	height: 105px;
	width: 105px;
	border: thin solid #666;
}
#container-text {
	text-align: center;
	padding: 0px;
	margin-top: 5px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}
.border-none {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.footer-text {
	color: #999;
	text-align: left;
	padding: 15px;
	display: block;
	margin: 0px;
	font-size: 12px;
	font-weight: bold;
}
a:link {
	color: #000;
}
a:visited {
	color: #000;
}
a:hover {
	color: #999;
}
a:active {
	color: #CCC;
}
-->
</style>

</head>

<body>
	<div id="wrapper">
    	<div id="content">
    		<div id="container">
        		<div id="conteiner-image">
            		<a href="#">
                		<img 
                			src="http://www.nataliedee.com/031303/square.jpg"
                    		height="105"
                    		width="105"
                       		class="border-none"
                            title="Picture borrowed from nataliedee.com"
                		/>
                	</a>    
            	</div>
            	<div id="container-text">
            		<a href="#">
                		Rollover text here
                	</a>
            	</div>
        	</div>
		</div>
      <div id="footer">
      	<span class="footer-text">
        	QUIZ: No matter how ugly this example looks (except picture), the question remains: how to create a current text rollover which becomes active in either event - when cursour is located over text itself (just like now) and when it's located over the image above.
        </span>
      </div>
    </div>
</body>
</html>
 
You must log in or register to reply here.
Top