首页 > html+div+css > HTML图片超链接代码
2013九月12

HTML图片超链接代码

HTML图片超链接代码,收藏一下,说不定就用的上!

如果要点一下图片就能打开一个网址的链接,代码是这样的:
<a href=”点击图片要打开的网址”><img src=图片网址 width=”120″ height=”48″ border=0></a>
如果要点一下图片就能打开一个网址的链接,并且新打开一个窗口。代码是这样的:
<a href=”点击图片要打开的网址” target=”_blank” title=”描述”><img src=”图片地址”  width=”120″ height=”48″ border=”边框”></a>
修改代码中width=”120″ height=”48″的数字调节图片宽、高。

在网页中全屏浮动的图片代码如下:
<DIV style=”BORDER-RIGHT: medium none; BORDER-TOP: medium none; FILTER: progid:DXImageTransform.Microsoftpadding:8px; ; LEFT: expression_r(eval_r(document.body.scrollLeft)+eval_r(document.body.clientWidth)-900); BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression_r(eval_r(document.body.scrollTop)+eval_r(document.body.clientHeight)-580); TEXT-ALIGN: center”><img src=”图片网址” name=”JPG1″
style=”LEFT: 700px; POSITION: absolute; TOP: 500px” width=”96″ height=”96″> <object
align=”baseline” classid=”CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6″ height=”10″
id=”pthl” style=”LEFT: 0px; TOP: 2px” width=”10″ border=”0″>
<param name=”Autostart” value=”-1″>
<param name=”Bounce” value=”-1″>
<param name=”Direction” value=”0″>
<param name=”Duration” value=”20″>
<param name=”Repeat” value=”-1″>
<param name=”Target” value=”JPG1″>
<param name=”Relative” value=”0″>
<param name=”TimerInterval” value=”0.1″>
<param name=”Shape” value=”polyline(208,200,220,210,500,830,200,300,200,200,200,200,250)” target=”_blank”></A></DIV>

带连接的浮动图片代码就是:
<DIV style=”BORDER-RIGHT: medium none; BORDER-TOP: medium none; FILTER: progid:DXImageTransform.Microsoftpadding:8px; ; LEFT: expression_r(eval_r(document.body.scrollLeft)+eval_r(document.body.clientWidth)-900); BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression_r(eval_r(document.body.scrollTop)+eval_r(document.body.clientHeight)-580); TEXT-ALIGN: center”><A href=”点击图片要打开的网址” target=_blank><img src=”图片网址” name=”JPG1″
style=”LEFT: 700px; POSITION: absolute; TOP: 500px” width=”96″ height=”96″> <object
align=”baseline” classid=”CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6″ height=”10″
id=”pthl” style=”LEFT: 0px; TOP: 2px” width=”10″ border=”0″>
<param name=”Autostart” value=”-1″>
<param name=”Bounce” value=”-1″>
<param name=”Direction” value=”0″>
<param name=”Duration” value=”20″>
<param name=”Repeat” value=”-1″>
<param name=”Target” value=”JPG1″>
<param name=”Relative” value=”0″>
<param name=”TimerInterval” value=”0.1″>
<param name=”Shape” value=”polyline(208,200,220,210,500,830,200,300,200,200,200,200,250)” target=”_blank”></A></DIV>

修改代码中width=”96″ height=”96″的数字调节图片宽、高。

点击漂浮的印章看效果(暂时去掉了)

可以飘到浏览器外边的全屏浮动图片代码如下:
<script><script>
<!–
/*
Bouncing Image script II (By Dheera Venkatraman lxjcnaf@163.com)
Submitted to and modified by Dynamic Drive for code enhancements
For full source, usage terms, and 100’s more DHTML scripts, visit http://lxjcnaf.129.tofor.com
*/

//1) specify path to image//图片的路径
var imagepath=”http://s5.sinaimg.cn/orignal/4887e7eb0ba82cf04e134″
//2) specify image dimensions//图片的大小
var imagewidth=167
var imageheight=67
//3) change this to adjust speed (lower is slower)//速度
var speed=8;
//4) configure what should happen when user clicks on image
//A value of “dismiss” will dismiss it, while a URL will cause the browser to navigate to it
var imageclick=”dismiss”
//5) Finally, configure when the image should automatically disappear, in seconds (0=perpetual)
var hideafter=0
////No editing required beyond this point/////////////////
var isie=0;
if(window.navigator.appName==”Microsoft Internet Explorer”&&window.navigator.appVersion.substring(window.navigator.appVersion.indexOf(“MSIE”)+5,window.navigator.appVersion.indexOf(“MSIE”)+8)>=5.5) {
isie=1;
}
else {
isie=0;
}
if(isie){
var preloadit=new Image()
preloadit.src=imagepath
}

function pop() {
if(isie) {
x=x+dx;y=y+dy;
oPopup.show(x, y, imagewidth, imageheight);
if(x+imagewidth+5>screen.width) dx=-dx;
if(y+imageheight+5>screen.height) dy=-dy;
if(x<0) dx=-dx;
if(y<0) dy=-dy;
startani=setTimeout(“pop();”,50);
}
}
function dismisspopup(){
clearTimeout(startani)
oPopup.hide()
}
function dowhat(){
if (imageclick==”dismiss”)
dismisspopup()
else
window.location=imageclick
}

if(isie) {
var x=0,y=0,dx=speed,dy=speed;
var oPopup = window.createPopup();
var oPopupBody = oPopup.document.body;
oPopupBody.style.cursor=”hand”
oPopupBody.innerHTML = ‘<IMG SRC=”‘+preloadit.src+'”>’;
oPopup.document.body.onmouseover=new Function(“clearTimeout(startani)”)
oPopup.document.body.onmouseout=pop
oPopup.document.body.onclick=dowhat
pop();
if (hideafter>0)
setTimeout(“dismisspopup()”,hideafter*1000)
}

// –>
</script>
一行四张图片代码
<table border=0>
<tr>
<td><a href=”链接1地址” target=_blank><img scr=”图片1地址” /></a></td>
<td><a href=”链接2地址” target=_blank><img scr=”图片2地址” /></a></td>
<td><a href=”链接3地址” target=_blank><img scr=”图片3地址” /></a></td>
<td><a href=”链接4地址” target=_blank><img scr=”图片4地址” /></a></td>
</tr>
</table>
用个一行4列的表格,网页基本都要靠无边框的表格来排版的

文章作者:SEO博客
本文地址:http://www.xiaoxinglai.com/html-div-css/2182/
版权所有 © 转载时必须以链接形式注明作者和原始出处!