怎么让鼠标点击后弹出一张图片

怎么让鼠标点击查看联系方式弹出图片01.jpg图片的大小是255*142的

<div class="left_2"><ul>
<li class="tu">杭州宇融投资公司<br/><a href="img/01.jpg" target="_blank"/>查看联系方式</a></li></ul></div>

急急

10 个解决方案

#1

本帖最后由 net_lover 于 2010-07-30 09:15:58 编辑

<a href="img/01.jpg" target="_blank" onclick="window.open(this.href,'','width=255,height=255');return false"/>查看联系方式</a></li>

#2

<a href="img/01.jpg" target="_blank" onclick="window.open(this.href,'','width=255,height=142');return false"/>查看联系方式</a></li>

#3

引用 1 楼 net_lover 的回复:

<a href="img/01.jpg" target="_blank" onclick="window.open(this.href,'','width=255,height=255');return false"/>查看联系方式</a></li>

怎么让它在本页显示

#4

可以用一个第三方js库，详情请看http://www.huddletogether.com/projects/lightbox2/
挺实用的。

#5

引用 3 楼 lxh75 的回复:

引用 1 楼 net_lover 的回复:
<a href="img/01.jpg" target="_blank" onclick="window.open(this.href,'','width=255,height=255');return false"/>查看联系方式</a></li>

怎么让它在本页显示

target="_self"

#6

引用 5 楼 only_endure 的回复:

引用 3 楼 lxh75 的回复:
引用 1 楼 net_lover 的回复:
<a href="img/01.jpg" target="_blank" onclick="window.open(this.href,'','width=255,height=255');return false"/>查看联系方式</a></li>

怎么让它在本页显示

target="_sel……

这样不行的还是跑到另外一页了

#7

加一个<img>,默认隐藏，点击后把图片路径赋给<img>并让<img>显示

#8

额。。。一个超链接的问题 <a href url> XXX</a>

#9

<!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=gb2312" />
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<title>弹出图片</title>
<script language="javascript">
$(document).ready(function()
{
    $("#AddShow").bind("click",ShowPanel);
});
   function ShowPanel()
   {
     $("#FormPanel").show("slow");
   }
  $(document).ready(function(){
   $("#close").hover(function(){
$(this).css("color","red");
});
$("#close").click(function(){
$("#FormPanel").hide("slow");
});
  });
</script>
<style>
  #FormPanel
        {
            width: 300px;
            height: 300px;
            line-height: 40px;
            font-size: 13px;
            background-color: #fff;
            border: 2px solid #333333;
            text-align: center;
            position: absolute;
            left: 400px;
            top: 20px;
        }
#close{
margin:0px;
float:left;
padding:0px;
cursor:pointer;}
</style>
</head>

<body>
<div id="FormPanel" style="display: none">
<span id="close">[关闭]</span>
<span><img src="img.jpg"/></span>
</div>
<span id="AddShow" name="AddShow" style="cursor:pointer; font-size:16; color:#CC3300;">查看联系方式</span>
</body>
</html>
要应用jQuery，就是这个<script language="javascript" type="text/javascript" src="jquery.js"></script>如果没有jQuery.js文件，自己网上找一下，jQuery是一个很好用的js框架

#10



<html>

<head>

<style>

#image1 {

    width:255px;

    height:142px;

    background:url(img/01.jpg);

    position:absolute;

    z-index:2;

    top:30px;

    left:150px;

    display:none;

}

</style>

<script>

function displayImage()

{

    document.getElementById("image1").style.display="block";

}

function hiddenImage()

{

    document.getElementById("image1").style.display="none";

}

</script>

</head>

<body>

<div class="left_2">

    <ul>

        <li class="tu">

            杭州宇融投资公司<br/>

            <div id="image1" onclick="hiddenImage()"></div>

            <a href="#" onclick="displayImage()">查看联系方式</a>

        </li>

    </ul>

</div>

</body>

</html>

注意图片的路径，单击超链接，弹出层显示图片；单击图片则隐藏。结帖吧～～

#1

本帖最后由 net_lover 于 2010-07-30 09:15:58 编辑

<a href="img/01.jpg" target="_blank" onclick="window.open(this.href,'','width=255,height=255');return false"/>查看联系方式</a></li>

#2

<a href="img/01.jpg" target="_blank" onclick="window.open(this.href,'','width=255,height=142');return false"/>查看联系方式</a></li>

#3

引用 1 楼 net_lover 的回复:

<a href="img/01.jpg" target="_blank" onclick="window.open(this.href,'','width=255,height=255');return false"/>查看联系方式</a></li>

怎么让它在本页显示

#4

可以用一个第三方js库，详情请看http://www.huddletogether.com/projects/lightbox2/
挺实用的。

#5

引用 3 楼 lxh75 的回复:

引用 1 楼 net_lover 的回复:
<a href="img/01.jpg" target="_blank" onclick="window.open(this.href,'','width=255,height=255');return false"/>查看联系方式</a></li>

怎么让它在本页显示

target="_self"

#6

引用 5 楼 only_endure 的回复:

引用 3 楼 lxh75 的回复:
引用 1 楼 net_lover 的回复:
<a href="img/01.jpg" target="_blank" onclick="window.open(this.href,'','width=255,height=255');return false"/>查看联系方式</a></li>

怎么让它在本页显示

target="_sel……

这样不行的还是跑到另外一页了

#7

加一个<img>,默认隐藏，点击后把图片路径赋给<img>并让<img>显示

#8

额。。。一个超链接的问题 <a href url> XXX</a>

#9

#10



<html>

<head>

<style>

#image1 {

    width:255px;

    height:142px;

    background:url(img/01.jpg);

    position:absolute;

    z-index:2;

    top:30px;

    left:150px;

    display:none;

}

</style>

<script>

function displayImage()

{

    document.getElementById("image1").style.display="block";

}

function hiddenImage()

{

    document.getElementById("image1").style.display="none";

}

</script>

</head>

<body>

<div class="left_2">

    <ul>

        <li class="tu">

            杭州宇融投资公司<br/>

            <div id="image1" onclick="hiddenImage()"></div>

            <a href="#" onclick="displayImage()">查看联系方式</a>

        </li>

    </ul>

</div>

</body>

</html>

注意图片的路径，单击超链接，弹出层显示图片；单击图片则隐藏。结帖吧～～

秒客网

怎么让鼠标点击后弹出一张图片

10 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

相关文章