图片链接网址代码-仿6room网站图片链接效果(一)

发布时间：2017-07-30 所属栏目：教程

一 : 仿6room网站图片链接效果(一)

在本人上一篇教程《彻底弄懂CSS盒子模式五(定位强化练习) 》有讲到一个很酷的链接面板提示的实例制作，那时主要是用到display方法来实现对象的显示和隐藏的，但是后来了解到那种方法对搜索引擎不友好，一些特别的阅读设备会读不到信息，比如盲人阅读器等等，所以今天又写了一个类似的教程，这次是用margin来实现，本实例实现方法简单但却很实用，实例做的是仿6room(著名web2.0视频网站)图片链接效果，下面请先运行代码看看最终实现的效果。
<!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" />
<title>仿6room图片链接效果--唐国辉</title>
<style type="text/css">

</style>
</head>

<body>
<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic1.jpg" alt="" /><span> 80万网民追捧全球最性感女主播</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div>

</body>
</html>

一、实例实现功能介绍

默认情况下，一个带有一定边框的图片链接放置在网页中，图片链接左下角还有一个“+”图形，意为添加到收藏夹或者视频播放列表吧（我这里没有加入脚本，只讲界面的实现），当鼠标移到链接图片区域上面时，会出现一个半透明链接简要说明层盖在图片上面，说明层的文字前边还有一个小的网站LOGO，说明层周围还会跟着出现一条黄色的边框，同时鼠标移到左下角“+”图形上，它的颜色会发生变化，而且像这样的结构一旦做好了，就可以随意在网页上任意地方安排它们位置，效果不会发生改变。下面是实例效果截图。

实例效果截图

二、结构和样式代码

1．结构

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic1.jpg" alt="" /><span> 80万网民追捧全球最性感女主播</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div>

2．样式

*{
    margin:0px;
    padding:0px;
}
body {
    margin:20px;
    font-size: 12px;
    line-height:18px;
}
.blueidea {
    background-color: #CCC;
    margin:5px;/*因为我一共做了三个实例,等一下排列使它们不会靠在一起*/
    padding: 3px;/*形成边框装饰，同时等一下也方便控制其子元素位置,所以我没有用BORDER*/
    height: 96px;/*与图片等高*/
    width: 128px;
    position: relative;
    float:left;/*让三个实例横向排列*/
}
.blueidea a img {
    height: 96px;
    width: 128px;
    border:none;
}
.blueidea a span {
    margin-top:-9000px;/*初始化对象不可见,这里不用display: none,因为display: none对搜索引擎不友好*/
    margin-left:-9000px;
    position: absolute;
}
.blueidea a:hover {
    background-color: #FFF;/*IE7以下版本A状态伪类bug*/
}
.blueidea a:hover span {
    height: 88px;
    width: 128px;
    position: absolute;
    left: 0px;
    top: 0px;
    border:1px solid #F90;
    padding: 10px 2px 2px 2px;/*让说明文字不要太靠上边界*/
    background:#FFF url(http://www.hsptc.com/cssImg/blueidea.gif) no-repeat 5px 10px;/*LOGO图片定位*/
    text-indent: 28px;/*文本缩进28px,避免与背景LOGO叠加*/
    filter:alpha(opacity=90);/*CSS透明度滤镜*/
    opacity:0.9;/*针对Mozilla浏览器CSS透明度滤镜*/
    display: block;
    text-decoration: none;/*去除说明文字链接下划线*/
    cursor:pointer; /*让光标显示手形*/
    margin:0px;/*重定位文字说明层回到正常位置*/
}
.blueidea em {
    position:absolute;
    left:5px;
    bottom:5px;
    width:25px;
    height:25px;
    cursor:pointer;
    background:url(http://www.hsptc.com/cssImg/blueidea1.gif) no-repeat;
}
.blueidea em:hover {
    background-image:url(http://www.hsptc.com/cssImg/blueidea2.gif) ;/*"+"图片鼠标滑过背景变换,只有标准浏览器起作用,IE7以下版本BUG*/
}

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic1.jpg" alt="" /><span> 80万网民追捧全球最性感女主播</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div>

2．样式

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic1.jpg" alt="" /><span> 80万网民追捧全球最性感女主播</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div>

2．样式

二 : 用图片链接网址代码

用图片链接网址代码_链接代码

图片连接，就是用图片连接你所需要的网址，用鼠标点击图片进入网页，起到美化装饰的作用。这种方式可以用在首页上，也可以用在发表的文章里，用在那里合适，就要根据个人需要而定。
图片的地址是用鼠标的右键点击“图片”，在点击“属性”属性里的“地址URL”显示的就是图片的地址，这一点希望大家注意，要有正确的地址，才能使以下的代码有效。
代码如下：

<DIV class=blogpicMid_pic TWFFAN="done"><A href="链接网址"

target=_blank><IMG height=120 src="链接图片地址" width=180

[www.61k.com）

border=0 TWFFAN="done"></IMG></A></DIV>

一、代码说明：

1、width=宽度height=高度可以根据自己需要调节。
2、在“链接网址”的方位粘贴需要连接的网址，
3、在“链接图片地址”上粘贴图片的网址
4、在删除连接网址和链接图片地址的字体时不是把""此符号删掉

二、放在首页的操作方法：
1、进入控制面板，点击个人首页维护
2、在自定义空白面板里点击“进入编辑”，
3、点击“新增”在“面板标题” 上填写题目，在“面板简介”里勾选显示源代码
4、把图片连接代码复制后，粘贴在勾选显示源代码的后面（标点符号都不可以缺少）“保存”返回。
5、再进入控制面板，在左侧“自定义设置 ”中点击“定制我的首页”
6、点击“添加模块”勾选添加的项目，点击“选取”保存设置就OK了

三、如何在文章中插入图片连接的方法
首先，点击“发表文章” ，打开文章发表器，在文本框中写入文章的正文后，勾选“显示源代码”勾选框，图片的连接代码粘贴在所有代码之后，点击“发表文章 ”既可。

以上文字来自网络，为了方便各位JMM们用来装饰博客，特别转载！

用图片链接网址代码_链接代码

三 : 图片链接代码

[www.61k.com）

四 : 如何让滚动图片加连接网址代码

如何让滚动图片加连接网址代码

提示:点上面图片试试打开连接网址

如何让滚动图片加连接网址代码：

代码略解：

让滚动图片加连接网址也不是很难的，加上<A href="连接网址"target=_blank>代码就可以了，包括从左到右，从右到左，从上到下，左右循环都是一样的，如不在新窗口中打开，就去掉target=_blank就可以了！
scrollAmount=4 为速度，值越大越快， width=650height=570为宽和高。

本文标题：图片链接网址代码-仿6room网站图片链接效果(一)
本文地址： http://www.61k.com/1054195.html

上一篇：注册表编辑器怎么打开-excel2013中怎么开启多人编辑功能?
下一篇：描写风的诗句-描写大风的诗句

61阅读

图片链接网址代码-仿6room网站图片链接效果(一)

ps拼接图片渐变效果

教程

设计