|
|
此文章由 footstep123 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 footstep123 所有！转贴必须注明作者、出处和本声明，并保持内容完整
根据大家的提示我知道如何来实现，当mouseover 可以出现2个手型图标，只是另一个手型图标是通过显示的图片，通过JavaScript来实现图片的显示和隐藏。我贴出来整个的html页面包括Javascript+css.
<!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>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>testproject</title>
<!-- import css stylesheet -->
<!--link type="text/css" rel="stylesheet" href='css/maincss.css' /-->
<style type='text/css'>
body{
/*define font style*/
font-family:verdana,arial,helvetica; color:#fff;
/*background */
background:#000 ;
}
/*define all part, alignment in center*/
#all {
width:900px;
margin:0px auto;
/*border:1px #f00 solid;*/
}
/*menu and banner*/
#head{
height:296px;
}
/*define menu*/
#headtop{
height:56px;
background-color:#4A4642;
}
/*banner*/
#headbottom{
height:240px;
/*define backgroud color, except banner color*/
background-color:#24a1c1;
}
/* center include 4 pictures, leftside has 2 picts, right side has 2 picts */
#center {
height:130px;
background-color:#fefefe;
/*move left right float */
clear:both;
}
/* left side, leftside has 2 picts*/
#center #centerleft{
width:49% ;
float:left;
margin-top:6px;
}
/*right side, right side has 2 picts*/
#center #centerright{
width:49% ;
float:right;
margin-top:6px;
}
#img01{
float:left;
margin-left:20px;
width:162px;
/*clear left float*/
clear:left;
/*for ie fadein and fadeout */
filter: alpha(opacity=70); /* MSIE */
}
#img02{
float:right;
width:162px;
margin-right:15px;
/*for ie fadein and fadeout */
filter: alpha(opacity=70); /* MSIE */
/*clear:left; */
}
#img03{
float:left;
margin-left:15px;
width:162px;
/*for ie fadein and fadeout */
filter: alpha(opacity=70); /* MSIE */
}
#img04{
float:right;
margin-right:20px;
width:162px;
/*clear right float*/
clear:right;
/*for ie fadein and fadeout */
filter: alpha(opacity=70); /* MSIE */
}
/*define bottom, has 2 columns*/
#bottom{
color:#99938b;
/*define font size */
font-size:6pt;
height:474px;
background-color:#f8f2e7;
/*clear right and left float*/
clear:both;
}
/*define left side 1 column*/
#bottomleft{
float:left;
width:231px;
background-color:#eee7dd;
margin-top:25px;
margin-left:18px;
/*padding:5px 10px;*/
}
/*define right side 1 column*/
#bottomright{
float:right;
width:581px;
background-color:#eee7dd;
margin-right:20px;
margin-top:25px;
/*padding:5px 10px;*/
}
/*define colmn margin*/
#innerleft, #innerright{
/*define the margin left-right and top-bottom*/
margin:5px 15px;
}
/*clear list style, move to right*/
ul {
margin-top:0px;
margin-left:600px;
list-style-type:none;
display:inline;
}
/*define link lvha style*/
ul a:link{color:#ffffff;text-decoration:none;}
ul a:visited{color:#99CC33;text-decoration:none;}
ul a:hover{color:#8C8C8C;text-decoration:underline}
ul a:active{color:#8c8c8c; text-decoration:none;}
/*define li horizonal alignment*/
li {
float:right;
font-size:10pt;
margin:20px 10px;
}
#imgp01{
margin-top:-14px;
margin-left:80px;
}
#imgp02{
margin-top:-14px;
margin-left:80px;
}
#imgp03{
margin-top:-14px;
margin-left:80px;
}
#imgp04{
margin-top:-14px;
margin-left:80px;
}
</style>
<!-- define javascript in main.js file-->
<!--script type="text/javascript" src='js/main.js' -->
<!--/script-->
<script type='text/javascript'>
//when window onload run init()
window.onload=function(){
init();
}
//make pictures fadeout and make hand icon disappear.
function init(){
//alert("fine1");
var i=1;
var picts=4;
//make handicon no display;
for (i=1;i<=picts;i++){
//get handicon object
d=document.getElementById("imgp0"+i);
d.style.display="none";
}
//init fadegegree 0.7
fadedegree1=0.7;
//make fadeout, how many picts
for (i=1;i<=picts ;i++)
{ //get picture object.
imgp=document.getElementById('img0'+i);
//ie browser
/* if (navigator.appName.indexOf("Microsoft")>=0)
{pictobj.filters.alpha.opacity=showstart*fadedegree1*100; } */
if (navigator.appName.indexOf("Microsoft")>=0)
{ //alert("fine1");
imgp.filters.alpha.opacity=1*fadedegree1*100; }
else //other browser.
{//more and more fade out.
imgp.style.opacity=1*fadedegree1;
}
}
//alert("fine");
}
//when mouseover link, then make handicon display and make picture fadein very clear.
function fadeclear(pic){
//frist make all init status.
init();
pict="imgp0"+pic;
//get handicon object.
img=document.getElementById(pict);
img.style.display='block';
fadedegree1=1;
img=document.getElementById('img0'+pic);
//to ie
if (navigator.appName.indexOf("Microsoft")>=0)
{img.filters.alpha.opacity=1*fadedegree1*100; }
else //other browser.
{//more and more fade out.
img.style.opacity=1*fadedegree1;
}
}
</script>
</head>
<!--body onload='init();'-->
<body >
<div id="all">
<!-- head part, include menu,banner-->
<div id="head">
<div id="headtop">
<ul>
<li><a href="#">contact</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">about</a></li>
</ul>
</div>
<div id="headbottom">
<img src='img/logo.png' alt='logo' title='logo' height='225' width='900' >
</div>
</div>
<!-- center part include 4 pictures and left side has 2 picts and right side has 2 picts-->
<div id="center">
<div id="centerleft">
<div id='img01'>
<img id="m01" src='img/img01.jpg' width='162' height='114' alt='img01' >
<div id='imgp01'>
<img src='img/handicon.png' alt='handicon' >
</div>
</div>
<div id='img02'>
<img id="m02" src='img/img02.jpg' width='162' height='114' alt='img02' >
<div id='imgp02'>
<img src='img/handicon.png' alt='handicon' >
</div>
</div>
</div>
<div id="centerright">
<div id='img03'>
<img id="m03" src='img/img03.jpg' width='162' height='114' alt='img03' >
<div id='imgp03'>
<img src='img/handicon.png' alt='handicon' >
</div>
</div>
<div id='img04' >
<img id="m04" src='img/img04.jpg' width='162' height='114' alt='img04' title='img04' >
<div id='imgp04'>
<img src='img/handicon.png' alt='handicon' >
</div>
</div>
</div>
</div>
<!-- bottom part, include left column and right column-->
<div id="bottom">
<div id="bottomleft">
<img src='img/latestnews.png' alt='latestnews' >
<div id="innerleft">
<p>These 11 short CSS Tutorials at Louisiana State University give a quick overview with code on how CSS works in tandem with HTML in web pages that are easy to create and load. These primarily cover Borders, Lists, Margins, Fonts and Tables and their respective syntax. </p>
<a href='#1' onmouseover='fadeclear("1");' onmouseout='init();'>read more</a>
<p> These 11 short CSS Tutorials at Louisiana State University give a quick overview with code on how CSS works in tandem with HTML in web pages that are easy to create and load. These primarily cover Borders, Lists, Margins, Fonts and Tables and their respective syntax. </p>
<a href='#1' onmouseover='fadeclear("2");' onmouseout='init();'>read more</a>
<p> These 11 short CSS Tutorials at Louisiana State University give a quick overview with code on how CSS works in tandem with HTML in web pages that are easy to create and load. These primarily cover Borders, Lists, Margins, Fonts and Tables and their respective syntax. </p>
<a href='#1' onmouseover='fadeclear("3");' onmouseout='init();'>read more</a>
<p> These 11 short CSS Tutorials at Louisiana State University give a quick overview with code on how CSS works in tandem with HTML in web pages that are easy to create and load. These primarily cover Borders, Lists, Margins, Fonts and Tables and their respective syntax. </p>
<a href='#1' onmouseover='fadeclear("4");' onmouseout='init();'>read more</a>
</div>
</div>
<div id="bottomright">
<img src='img/welcome.png' alt='welcome'>
<div id="innerright">
<p>These 11 short CSS Tutorials at Louisiana State University give a quick overview with code on how CSS works in tandem with HTML in web pages that are easy to create and load. These primarily cover Borders, Lists, Margins, Fonts and Tables and their respective syntax. Each of these CSS Tutorials is accompanied with the applicable CSS code and how that code looks when integrated in HTML. </p>
<p>These 11 short CSS Tutorials at Louisiana State University give a quick overview with code on how CSS works in tandem with HTML in web pages that are easy to create and load. These primarily cover Borders, Lists, Margins, Fonts and Tables and their respective syntax. Each of these CSS Tutorials is accompanied with the applicable CSS code and how that code looks when integrated in HTML. </p>
<p>These 11 short CSS Tutorials at Louisiana State University give a quick overview with code on how CSS works in tandem with HTML in web pages that are easy to create and load. These primarily cover Borders, Lists, Margins, Fonts and Tables and their respective syntax. Each of these CSS Tutorials is accompanied with the applicable CSS code and how that code looks when integrated in HTML. </p>
<p>These 11 short CSS Tutorials at Louisiana State University give a quick overview with code on how CSS works in tandem with HTML in web pages that are easy to create and load. These primarily cover Borders, Lists, Margins, Fonts and Tables and their respective syntax. Each of these CSS Tutorials is accompanied with the applicable CSS code and how that code looks when integrated in HTML. </p>
<p>These 11 short CSS Tutorials at Louisiana State University give a quick overview with code on how CSS works in tandem with HTML in web pages that are easy to create and load. These primarily cover Borders, Lists, Margins, Fonts and Tables and their respective syntax. Each of these CSS Tutorials is accompanied with the applicable CSS code and how that code looks when integrated in HTML. </p>
<p>These 11 short CSS Tutorials at Louisiana State University give a quick overview with code on how CSS works in tandem with HTML in web pages that are easy to create and load. These primarily cover Borders, Lists, Margins, Fonts and Tables and their respective syntax. Each of these CSS Tutorials is accompanied with the applicable CSS code and how that code looks when integrated in HTML. </p>
</div>
</div>
</div>
</div>
</body>
</html>
用到的几个图片
[ 本帖最后由 footstep123 于 2011-1-24 20:43 编辑 ] |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有帐号？注册
x
|
~~~腌笃鲜~~~虾子面筋~~~洋葱大排~~~糟溜鱼片~~~生菜沙拉~~~ (2011-10-24) chesecake 
陈年旧事 － 在北京的青涩岁月(更新在47楼) (2012-7-6) pangpang 
发表于 2011-1-22 17:09
