Dreamweaver在网页一开始只有一排小图,当鼠标移到其中一张小图上,在上面显示大图 请问高手们,怎么在dreamweaver软件鼠标划过小图变成...

\u4f1a\u7528DW\u7f51\u9875\u5236\u4f5c\u8f6f\u4ef6\u628a\u4e00\u5f20\u5c0f\u56fe\u7247\u5f53\u9f20\u6807\u653e\u5728\u4e0a\u9762\u6216\u662f\u7ecf\u8fc7\u7684\u65f6\u5019\u56fe\u7247\u5c31\u5728\u65c1\u8fb9\u653e\u5927\u6216\u662f\u8fdc\u4e00\u70b9\u7684\u5730\u65b9\u653e\u5927\u5417\uff1f

\u4f1a\u7528DIV+CSS\u4e48? \u6709\u4e2a\u5c5e\u6027\u53eb\u505a display \u5f53\u9f20\u6807\u5728\u4e0a\u65f6\u9690\u85cf\u5c0f\u7684,\u663e\u793a\u5927\u7684,\u53cd\u4e4b~ \u8fd9\u4e2a\u5e03\u5c40\u6bd4\u8f83\u9ebb\u70e6 \u7528\u4ee3\u7801\u5012\u662f\u65b9\u4fbf

\u9700\u8981\u7528\u5230css\u548cjavascript \u7ed9\u4f60\u4e2a\u53c2\u8003\u7684\u94fe\u63a5\uff1ahttp://www.divcss5.com/css-texiao/texiao676.shtml

给图片设置两个属性 onmouseover="document1()" onmouseout="document2()" 分别触发两个函数

<img src=" " id="dd" onmouseover="document1()" onmouseout="document2()" />
<script >
function document1(){
v1=document.getElementById("dd");
v1.style.height="400";
v1.style.width="600";
}
function document2(){
v1=document.getElementById("dd");
v1.style.height="200";
v1.style.width="200";
}
</script>

如果要做这个效果,就要用到javascript!!只用HTML+CSS不能实现这个效果哟!
我简单的写一个效果,在IE8和火狐浏览器下能正常运行:
<!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>无标题文档</title>
<style type="text/css">
div{

}
#div1 {
cursor: auto;
background-color: #003;
height: 100px;
width: 100px;
float:left;
margin-left:100px;
margin-top:100px;
}
#div2 {
background-color: #069;
height: 100px;
width: 100px;
float:left;
margin-left:100px;
margin-top:100px;
}
.theClass {
display:none;
position:absolute;
background-color: #300;
height: 200px;
width: 200px;
}
</style>

</head>

<body>
<div id="div1" ></div>
<div id="div2" ></div>
<div id="div3" class="theClass"></div>
<div id="div4" class="theClass"></div>
<script>
var adiv1=document.getElementById('div1');
var adiv2=document.getElementById('div2');
var adiv3=document.getElementById('div3');
var adiv4=document.getElementById('div4');
adiv3.style.marginTop=50+'px';adiv3.style.marginLeft=50+'px';
adiv4.style.marginTop=50+'px';adiv4.style.marginLeft=250+'px';
adiv3.onmouseover=adiv1.onmouseover=function()
{
adiv3.style.display='block';
}
adiv4.onmouseover=adiv2.onmouseover=function()
{
adiv4.style.display='block';
}
adiv3.onmouseout=adiv1.onmouseout=function()
{
adiv3.style.display='none';
}
adiv4.onmouseout=adiv2.onmouseout=function()
{
adiv4.style.display='none';
}
</script>
</body>
</html>
你只要在相应的位置加上图片地址能好了!
不知道这么说回答了你的问题没有?

  • 濡備綍鍦Dreamweaver涓殑涓涓椤甸潰寮曠敤鍙﹀涓涓〉闈㈢殑鍐呭
    绛旓細鐢ㄤ竴鏉¤鍙ュ氨鍙互浜嗭紝涓嶈繃瑕佹敞鎰忎袱寮椤甸潰鐨勫彉閲忎笉鑳介噸澶嶏紝姣斿鎴戣璋冪敤top.asp,灏卞湪瑕佽皟鐢ㄧ殑鍦版柟鍐欎笂<!--#include file="top.asp"--> 涓嶈繃瑕佹敞鎰弔op.asp 椤甸潰閲岄潰鐨勪唬鐮佹湁鍐欒鍒犻櫎锛屽彉閲忛噸澶嶄簡浼氬啿绐佺殑
  • DW鎬庢牱鍦ㄧ綉椤涓柊澧炶儗鏅煶涔愭挱鏀惧櫒
    绛旓細<bgsound src=xxx loop="-1"> 鍏朵腑锛氣渪xx鈥濆娣诲叆浣犺鍔犲叆鐨勮儗鏅煶涔愮殑鍦板潃锛屸渓oop鈥濅腑鐨勬暟鍊兼槸闊充箰鍥炲湀鐨勬鏁帮紝鍙瀹氫负浠绘剰姝f暣鏁帮紝鑻ヨ涓衡-1鈥濈殑璇濓紝闊充箰灏嗘案杩滃洖鍦堛傚湪Dreamweaver涓虹綉椤垫柊澧炶儗鏅煶涔愭挱鏀惧櫒锛屾槸涓板瘜椤甸潰娲诲姩鐨勯噸瑕佸唴瀹广傛湰绡囨暀绋嬪皢灏Dreamweaver缃戦〉鑳屾櫙闊充箰鎾斁鍣ㄧ殑鏂板杩涜璇︾粏...
  • 濡備綍鐢Dreamweaver鍋缃戦〉
    绛旓細1銆侀鍏堜笅杞藉畨瑁Dreamweaver锛屾墦寮鍚庯紝鏂板缓涓涓缃戦〉锛屼竴鑸夋嫨鈥淗TML鈥濆缓绔嬬綉椤点傞夋嫨鈥滅粡鍏糕濈晫闈紝鏈夊姪浜庢垜浠洿渚挎嵎浣跨敤杩欎釜杞欢銆2銆佷笅闈㈤夋嫨杩欎笁涓晫闈紝浠g爜銆佹媶鍒嗐佽璁★紝涓鑸粯璁よ璁$晫闈紝瀵逛簬鏂版墜杩欎釜鍔熻兘鍏锋湁鍙鍖栵紝鑳芥洿濂界殑鍒朵綔缃戦〉銆3銆佷笅闈㈡垜浠潵鍒朵綔缃戠珯绔欑偣锛屽湪鐢佃剳涓婂缓涓涓枃浠朵綔涓烘牴鐩綍銆...
  • 濡備綍鐢dreamweaver鍒朵綔涓汉缃戦〉濡備綍鐢╠reamweaver鍒朵綔涓汉缃戦〉浣滃搧
    绛旓細1銆侀鍏堜笅杞藉畨瑁Dreamweaver锛屾墦寮鍚庯紝鏂板缓涓涓缃戦〉锛屼竴鑸夋嫨鈥淗TML鈥濆缓绔嬬綉椤点傞夋嫨鈥滅粡鍏糕濈晫闈紝鏈夊姪浜庢垜浠洿渚挎嵎浣跨敤杩欎釜杞欢銆2銆佷笅闈㈤夋嫨杩欎笁涓晫闈紝浠g爜銆佹媶鍒嗐佽璁★紝涓鑸粯璁よ璁$晫闈紝瀵逛簬鏂版墜杩欎釜鍔熻兘鍏锋湁鍙鍖栵紝鑳芥洿濂界殑鍒朵綔缃戦〉銆3銆佷笅闈㈡垜浠潵鍒朵綔缃戠珯绔欑偣锛屽湪鐢佃剳涓婂缓涓涓枃浠朵綔涓烘牴鐩綍銆...
  • Dreamweaver鍦鍚屼竴缃戦〉涓疄鐜板垏鎹笉鍚椤甸潰
    绛旓細1銆備娇鐢ㄦ鏋 2銆備娇鐢ㄥ眰+鈥滃姩浣--闅愯棌鍜屾樉绀衡3銆備娇鐢╯pry鍔熻兘
  • 濡備綍鍦dreamweaver涓缃戦〉鐨勮〃鏍间腑娣诲姞鑳屾櫙棰滆壊鍛
    绛旓細璁剧疆鏂规硶濡備笅锛 鐩存帴璁剧疆锛氬湪璁捐妯″紡涓嬶紝閫変腑琛ㄦ牸锛屽湪琛ㄦ牸灞炴у伐鍏锋爮涓夋嫨棰滆壊鍗冲彲璁剧疆 鍔犱唬鐮侊細閫変腑琛ㄦ牸鍚庯紝鎵撳紑浠g爜绐楀彛锛屾壘鍒癰gcolor灏辨槸鑳屾櫙鑹诧紝#鍚庨潰鐨6涓暟瀛椾袱涓ゅ垎鍒唬琛≧GB涓夌棰滆壊 锛屽彲浠ラ氳繃鏇存敼鏁板瓧鏉ュ疄鐜伴鑹茬殑鍙樺寲銆
  • 鐢dreamweaver鍋缃戦〉鏃,鎴戞兂鍦ㄦ湰缃戦〉鍐呯殑涓涓〃鏍煎唴鏄剧ず鍙﹀涓涓綉椤...
    绛旓細鐢dreamweaver鍋缃戦〉鏃讹紝鎯冲湪鏈綉椤靛唴鐨勪竴涓〃鏍煎唴鏄剧ず鍙﹀涓涓綉椤靛彲浠ラ夋嫨璋冪敤鍛戒护銆傚伐鍏峰師鏂欙細纭欢锛氱數鑴戜竴鍙般傝蒋浠讹細dreamweaver銆傛柟娉曪細1銆佹墦寮dreamweaver銆2銆佸缓绔嬬綉椤甸」鐩被鍨嬨3銆佹彃鍏ヨ〃鏍笺4銆佸湪璋冪敤椤甸潰鎻掑叆浠g爜锛<!--#include file="璋冪敤椤甸潰鍚嶇О"-->銆
  • 鍦ㄧ敤dreamweaver鍋缃戦〉鏃,杈撳叆鏂囧瓧鏃剁┖鏍艰佹槸鍙兘绌轰竴涓,鎸夊啀澶氫篃娌...
    绛旓細杩樺彲浠 鍦ㄧ紪杈 棣栭夐」涓 璁剧疆 锛氬父瑙- 缂栬緫閫夐」 - 鍏佽杩炵画鐨勭┖鏍 鍕鹃変笂 灏卞彲浠 浜 姣斿彉鎹㈣緭鍏ユ硶瑕佹柟渚
  • Dreamweaver 鍜 Frontpage 鍦ㄧ綉椤鍒朵綔涓婄殑鍖哄埆
    绛旓細Dreamweaver鍜孎rontPage閮芥槸鐭ュ悕鐨缃戦〉璁捐杞欢銆侳rontPage鍗犻鐨勬槸涓骇甯傚満锛屽叾鍦颁綅鐘瑰瀛楀鐞嗚蒋浠朵腑鐨刉ord锛屾瘮杈冮噸瑙嗙綉椤电殑寮鍙戞晥鐜囥佹槗瀛︽槗鐢ㄧ殑寮曞杩囩▼锛涜孌reamweaver涓绘敾鐨勬槸缃戦〉楂樼骇璁捐甯傚満锛屾墍寮鸿皟鐨勬槸鏇村己澶х殑缃戦〉鎺у埗銆佽璁¤兘鍔涘強鍒涙剰鐨勫畬鍏ㄥ彂鎸ュ悓锛屽畠鍥婃嫭浜咶rontPage鐨勬墍鏈夊熀鏈搷浣滐紝骞跺紑鍙戜簡璁稿鐙叿鐗硅壊...
  • 鐢Dreamweaver宸茬粡鍋氬ソ鍚勪釜缃戦〉,閾炬帴涔熷仛濂戒簡,鎬庢牱鎶婂畠浠斁鍦ㄤ竴涓珯鐐归噷...
    绛旓細1. 鍦Dreamweaver涓墦寮涓涓缃戦〉锛岀偣鍑昏彍鍗曟爮鐨勨滄枃浠垛-鈥滀繚瀛樷濓紝閫夋嫨淇濆瓨鍒板垰鎵嶆柊寤虹殑鏂囦欢澶逛腑銆2. 鐐瑰嚮鑿滃崟鏍忕殑鈥滄枃浠垛-鈥滄柊寤衡-鈥滅珯鐐光濓紝鍦ㄥ脊鍑虹殑鈥滅珯鐐圭鐞嗗櫒鈥濅腑鐐瑰嚮鈥滄柊寤虹珯鐐光濄3. 鍦ㄥ脊鍑虹殑鈥滄柊寤虹珯鐐光濆璇濇涓紝濉啓绔欑偣鍚嶇О鍜屾湰鍦版枃浠跺す璺緞锛堝嵆鍒氭墠鏂板缓鐨勬枃浠跺す璺緞锛夛紝鐐瑰嚮鈥滀笅涓...
  • 扩展阅读:dreamware网页制作 ... dreamweaver免费版 ... dream weaver软件 ... dreamweaver手机版安装 ... www.sony.com.cn ... adobe dreamweaver下载 ... dreamwearver手机版下载 ... dreame扫地机器人app ... dreamweaver cs6 ...

    本站交流只代表网友个人观点,与本站立场无关
    欢迎反馈与建议,请联系电邮
    2024© 车视网