php+点击图片跳转网页,怎么在图片上加超链接 点击图片跳转到指定网页

在一些论坛、博客或者是一些网站浏览图片的时候会发现一个问题,就是当你不小心点击某一张图片后会自动跳转到另一个网页的界面,这样做的目的其实是为了宣传、推广该网页,也达到一个引流的效果,我们也可以利用这样的方法来推广自己的产品。该方法的原理就是给图片添加超链接,图片加超链接的方法其实很简单,一个记事本文件、一个链接的网址、一张图片,即可达到想要的效果。

效果预览

狂戳图片查看效果

2b40afd8fa4dd3094e2eeb0373eb2452.png

首先需要新建一个记事本文件。桌面空白处右击,在弹出的菜单中选择“新建文本文档”。

f9a08e5a03180a1d1b10a8447b020069.png

建立记事本文件后把相应的程序命令复制粘贴进去,程序代码我已经上传了,大家可以在上面的地址进行下载。命令其实很简单,一个表示要跳转的网页地址,另一个表示图片所在的地址,最后的一个则表示图片的边框、图片宽度以及图片的高度。

0c4671be695bd1f2717c1c510f9e04a3.png

我们先来设置要跳转的网页地址。首先打开一个要跳转的网页,然后复制网页地址栏上面的地址,接着粘贴到记事本中相应的位置。大家可以根据下面的图示来进行相关的操作。

8bb68d783c77d4185c0c967f4ce0f7c5.gif

跳转地址设置好之后现在来设置图片的地址。在网页中找到所需要用到的图片素材,然后右击该图片,在弹出的菜单中选择“复制图片地址”。然后打开新建的记事本文件,把刚刚复制的地址粘贴到相应的位置即可。

2e039b6d999f22bee760b8af116c0f39.gif

因为命令中的地址前面必须要带有http://,所以本地电脑上面的图片没办法直接作为超链接的图片,那如果要用到本地图片作为超链接图片该怎样办呢?这时就要用到百度网盘了,先把相应的图片素材上传到百度网盘,然后右击该图片,在弹出的菜单中选择“分享”。

b006e63988a97f598de998014d27e3c1.png

这时会弹出一个新的界面,点击界面上的“创建公开链接”,等相应的链接地址显示后再点击“复制链接”。接着再把刚刚复制的链接粘贴到记事本的相应位置就行了。

37dfa032a097f3890b04955438fd7c02.png

接着来设置图片的边框、图片宽度以及图片高度。border表示图片边框,width表示图片宽度,height则表示图片的高度。图片边框一般设置为0,图片宽度和高度大家可以根据自己的需要进行设置。右击图片选择属性,可以查看相应的参数信息。

65db006f4900e9e2ac7f3ec140df37b4.png

所有的命令都设置好之后现在对记事本文件进行保存。选择“文件”菜单下面的“另存为”,在弹出的另存为对话框中设置保存的位置、名称以及保存类型,最后单击保存即可。这里要注意一点,保存文件名称的后缀名一定是要为.htm。

011b04980e2fdd86470c202d8bd292d9.png

我是保存在桌面上的,所以现在在桌面上就会看到一个后缀名为.htm的文件,双击打开该文件(我这里是用IE浏览器打开的),在浏览器的页面上就会显示相应的图片内容,直接点击该图片会进入到之前设置的要跳转到的网页上面。右击该图片,在弹出的菜单中选择“复制”,然后粘贴到要插入图片的位置,以后只要点击该图片就会跳转到自己想要链接的网页了。

8d9f6f206982408ffac1a919d4d0b355.png

IE浏览器不知道为什么变成英文的了,设置浏览器的显示语言都没用,所以大家上面看到的是英文菜单,大家自己在操作的时候直接右击选择复制就行了哈。建议大家先在IE浏览器打开一个网页,然后再打开后缀名为.htm的文件,这样就不会产生错误了,不过也可能是我的浏览器的原因哈。

以上就是今天关于怎样给图片加超链接的相关操作了。大家在编辑命令的时候一定要输入正确的网页地址和图片地址,而且命令中所有的引号一定要是英文状态下的引号,不然会出现链接不成功的情况。

(领导说了,分享本文一次小编工资涨0.5元)

为了感谢你帮小编分享,推荐你一个学习小视频制作的方法 >>

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详尽的前端笔记,包含html和css部分,由xmind8做的笔记。css部分:编写的位置 1.内联样式 将样式编写到标签的style属性中 <p style="color:red;"></p> 这种样式只会对当前标签起作用,不能对样式进行复用,不方便后期维护,不推荐使用 2.内部样式表 将样式表编写到head中的style标签中 <style type="text/css"></style> 使用内部样式表,进一步将表现和结构分离,可以同时为多个元素设置样式,方便后期的维护 3.外部样式表 将样式表编写到外部的CSS文件中,然后通过link标签将外部文件引入 <link rel="stylesheet" type="text/css" href="文件的路径"/> 将样式编写到外部样式表中,可以在不同的页面中使用同一个样式表,完全将表现和结构分离,方便后期的维护,推荐使用的方式 编写的位置 1.内联样式 将样式编写到标签的style属性中 <p style="color:red;"></p> 这种样式只会对当前标签起作用,不能对样式进行复用,不方便后期维护,不推荐使用 2.内部样式表 将样式表编写到head中的style标签中 <style type="text/css"></style> 使用内部样式表,进一步将表现和结构分离,可以同时为多个元素设置样式,方便后期的维护 3.外部样式表 将样式表编写到外部的CSS文件中,然后通过link标签将外部文件引入 <link rel="stylesheet" type="text/css" href="文件的路径"/> 将样式编写到外部样式表中,可以在不同的页面中使用同一个样式表,完全将表现和结构分离,方便后期的维护,推荐使用的方式 基本语法 选择器 通过选择器可以选中页面中的一组元素,然后为其设置样式 元素选择器 根据标签名,选中页面中的指定元素 语法:标签名{ } 例子: div{} p{} h1{} id选择器 根据元素的id属性值选中一个唯一的元素 语法:#id {} 例子: #box1{} #hello{} 类选择器 根据元素的class属性值,选中一组元素 语法:.class{} 例子: .hello{} .box{} 通配选择器 选中页面中的所有元素 语法:*{} 通配选择器的性能比较差,尽量避免使用 并集选择器 可以同时选中符合多个选择器的元素 语法:选择器1,选择器2,选择器N{} 例子: div,p,#box,.hello{} 交集选择器 可以选中满足多个条件的元素 语法:选择器1选择器2选择器N{} 例子:p.hello{} 后代元素选择器 选中指定元素的指定后代元素 语法:祖先元素 后代元素{} 例子: div span {} div p{} 子元素选择器 选中指定元素的指定子元素 语法:父元素 > 子元素 {} 例子: div > span {} div > p{} 声明块 声明块中实际上就是一个一个CSS声明 声明 每一个CSS声明都是一个样式,实际上就是一个名值对的结构 名和值之间使用:链 :左边是样式的名字 :右边是样式的值 每一个声明以;结尾 例子 color:red; font-size:20px; 元素之间的关系 父元素 直包含子元素的的元素叫做父元素 子元素 直被父元素包含的元素叫做子元素 祖先元素 直或间包含后代元素的元素叫做祖先元素,父元素也是祖先元素 后代元素 直或间被祖先元素包含的元素叫后代元素,子元素也是后代元素 兄弟元素 拥有相同父元素的元素叫做兄弟元素 块元素和内联元素 块元素 块元素会独占页面中的一行,无论他的内容的多少 一般使用块元素对页面进行布局 常见的块元素 div p h1~h6 内联元素 内联元素只占用自身的大小,不会独占一行 内联元素也叫行内元素(inline) 一般内联元素都是用来为文本来设置效果 常见的内联 span a img 包裹规则 一般都是使用块元素去包裹内联元素,而不会使用内联去包裹块元素 a元素可以包含任意元素,除了a本身 p元素不能包含任何块元素 伪类和伪元素 伪类和伪元素用来表示元素所处的一个特殊的状态,或者是一个特殊的位置 :link 表示一个普通的链(未访问过的链) :visited 表示访问过的链 :hover 鼠标移入的链,也可以为其他元素设置hover :active 正在被点的链,也可以为其他元素设置active :focus 表示元素获取焦点的状态,一般用于文本框 ::selection 表示内容被选中的状态 在火狐中使用::-moz-selection来代替 :first-letter 表示第一个字符 :first-line 表示文字的第一行 :before 选中元素的最前边 一般该伪类都会结合content一起使用,通过content可以向指定位置添内容 :after 选中元素的最后边 一般该伪类都会结合content一起使用,通过content可以向指定位置添内容 属性选择器 根据元素的属性选择指定元素 [属性名] 选取含有指定属性的元素 [属性名="属性值"] 选取属性值等于指定值的元素 [属性名^="属性值"] 选取属性值以指定内容开头的元素 [属性名$="属性值"] 选取属性值以指定内容结尾的元素 [属性名*="属性值"] 选取属性值中包含指定内容的元素 兄弟元素选择器 选取后一个兄弟元素 前一个 + 后一个 选取后边所有的兄弟元素 前一个 ~ 后边所有 子元素的伪类 :first-child 寻找父元素的第一个子元素,在所有的子元素中排序 :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序 :nth-child 寻找父元素中的指定位置子元素,在所有的子元素中排序 例子 p:nth-child(3) 可以使用even,来找到偶数的子元素 可以使用odd,来找到奇数的子元素 :first-of-type 寻找指定类型中的第一个子元素 :last-of-type 寻找指定类型中的最后一个子元素 :nth-of-type 寻找指定类型中的指定子元素 否定伪类 从一组元素中将符合要求的元素剔除出去 语法: :not(选择器) 例子: .abc:not(div) HTML,文本标记语言 负责页面中的结构,定义出页面中的各个组成部分 HTML是采用纯文本的形式的编写,采用HTML标签来标识出页面中的不同部分 标签 成对出现 <标签名></标签名> 自结束标签 <标签名 /> 属性 通过属性可以设置标签的效果 属性需要定义在开始标签中或这自结束标签中 属性实际上是一组一组名值对结构 例子: <标签名 属性名="属性值" 属性名="属性值"></标签名> <标签名 属性名="属性值" 属性名="属性值" /> HTML页面的基本结构 常用标签 <html> 网页的根标签 一个页面中有且只有一个根标签 网页中的所有内容都需要写在html标签的内部 <head> 网页的头部 该标签中的内容不会在网页中直显示 该标签用于帮助浏览器解析页面 子标签 <title> 用来设置网页的标题 默认会在浏览器的标题栏中显示 搜索引擎检索网页时,会主要检索title中的内容,它会影响到页面在搜索引擎中的排名 <meta> 用来设置网页的元数据,比如网页使用的字符集 <meta charset="utf-8" /> 设置网页的关键字 <meta name="keywords" content="关键字,关键字,关键字,关键字"/> 设置网页的描述 <meta name="description" content="网页的描述"/> 请求的重定向 <meta http-equiv="refresh" content="秒数;url=地址" /> <body> 网页的主体 网页中所有的可见部分都需要在body中编写 <h1> ~ <h6> 标题标签 在html中一共有六级标题 六级标题中,h1最重要,h6最不重要,一般页面中只会使用h1~h3 h1的重要性仅次于title,浏览器也会主要检索h1中的内容,以判断页面的主要内容 一般一个页面中只能写一个h1 <p> 段落标签 <br /> 换行标签 <hr /> 水平线标签 内联框架 可以向一个页面中引入其他的外部页面 <iframe></iframe> 属性 src 外部页面的地址,可以使用相对路径 width和height 可以设置框架的宽度和高度 name 可以为内联框架指定一个名字 可以将该属性值设置为的target属性的值 这样当点时,页面将会在相应的内联框架中打开 内联框架中的内容不会被搜索引擎所检索,所以开发中尽量不要使用内联框架 可以使当前页面到其他的页面 <a>链的文字</a> 属性 href 指向链的目标地址,可以是一个相对路径 还可以是#id属性值,这样当点以后,将会到当前页面的指定位置 可以使用mailto:来创建一个发送电子邮件的 target 指定在哪个窗口中打开链 可选值 _self 默认值,默认在当前窗口打开链 _blank 在新窗口中打开链 内联框架的name属性值 在指定的内联框架中打开链 注释 语法 <!-- 注释内容 --> 注释中的内容不会在页面中显示,但是会在源码中显示,我们可以通过注释来说明网页的代码 也可以通过注释隐藏一些页面中不想显示的内容 实体 在HTML页面中一些特殊符号是不能直使用,需要使用实体来代替这些特殊符号 实体也可以称为义字符 实体的语法 &实体名; 常用的实体 空格   < < > > 版权符号 © 图片标签 <img /> 使用图片标签可以向页面中引入一个外部图片 属性 src 指向一个外部图片的路径,可以使用相对路径 alt 指定一个在图片无法载时对图片的描述 搜索引擎主要通过该属性来识别图片的内容 如果不写该属性则搜索引擎会对图片进行收录 width 设置图片的宽度 height 设置图片的高度 图片的格式 JPEG 颜色丰富的图片,如,照片 GIF 颜色单一,简单透明的图片,动态图 PNG 颜色丰富,复杂透明的图片 图片选择的原则 效果一致,用小的 效果不一致,用效果好的 相对路径 相对于当前资源所在的目录的路径 可以使用../返回一级目录,返回几级使用几个../ xHtml语法规范 1.HTML中不区分大小写,但是尽量使用小写 2.HTML的注释不能嵌套 3.标签必须结构完整 要么成对出现 要么自结束标签 4.标签可以嵌套但是不能交叉嵌套 5.属性必须有值,且值必须引号,单引号双引号都可以 文本标签 <em> 表示语气上的强调 <strong> 表示内容的重要性 <i> 表示单纯的斜体 <b> 表示单纯的粗 <small> 表示细则一类的内容 <cite> 表示参考的内容,凡是书名号的都可以使用cite <q> 短引用,行内引用 <blockquote> 长引用,块级引用 <sup> 上标 <sub> 下标 <del> 删除的内容 <ins> 插入的内容 <pre> 预格式标签,可以保留代码中空格换行这些格式 <code> 表示程序代码 列表 无序列表 使用ul来创建一个无序列表,在列表中使用li来表示一个列表项 无序列表使用符号作为项目符号 有序列表 使用ol来创建一个无序列表,在列表中使用li来表示一个列表项 使用有序的序号作为项目符号 定义列表 列表相关的元素都是块元素,他们之间可以互相嵌套 去除项目符号 list-style:none

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值