通过js实现图片与文字的转换

html部分

<ul><!--onclick="showPic(this); return false;":因为onclick时间处理函数所触发的js代码返回给他的值是false,所以a链接不会跳转--><li><a href="1/1.jpg"  onclick="showPic(this); return false;" title="我好不好看">我是一只小猫咪</a></li><li><a href="2/1.jpg"  onclick="showPic(this); return false;"  title="不认识我了">吓你一跳</a></li><li><a href="3/1.jpg"  onclick="showPic(this); return false;"  title="没见过吧">这样的瀑布见过吗</a></li>
</ul>
<img id='placeholder' src="1/1.jpg" alt="my image gallery">
<p id ='description'>45码的鞋子在你脸边徘徊</p>

js部分

function showPic(whichpic){// whichpic:代表一个节点// getAttribute:把href的路径作为参数存储到sourcrvar sourcr = whichpic.getAttribute("href");// 获取idplaceholdervar placeholder=document.getElementById('placeholder');// 使用setAttribute对placeholder元素的src属性进行刷新// 将图片的路径刷新placeholder.setAttribute("src",sourcr);// 更新描述var text = whichpic.getAttribute('title');// 获取id 为description的值var description = document.getElementById("description");// 测试是否可以获得数据// firstChild:返回节点的第一个子节点// nodeValue:得到第一个节点的值// console.log(description.firstChild.nodeValue);// 将text赋值给description，是description达到点击之后改变的效果description.firstChild.nodeValue =text;
}

css部分

    body{color:#333;background-color:#ccc;margin:1em 10%;}h1{color:#333;background-color:transparent;}a{color:#c60;background-color:transparent;font-weight:bold;text-decoration:none;}ul{padding:0;}li{float:left;padding:1em;list-style:none;}img{display: block;clear:both;width:400px;height:400px;}

执行效果

通过js实现图片与文字的转换相关推荐

图片转文字怎么转换？分享你个简单的方法
在我们日常生活工作种,经常会接纳到很多带有文字信息的图片.有时我们需求将这些文字提取,小伙伴们如果碰到这种情况都是怎样操作的呢?是依据文字手动输入的吗?在图片量少的话是可以,可是假如数量较多的话,人工 ...
图片转文字怎么转换？这个方法不能错过
最近收到了一些朋友的咨询.他们收到了对方发送的图片.他们认为图片上的文本信息更重要,但不知道有什么快速的方法可以提取到图片中的文本.在这种情况下大家通常会怎么做呢?今天,我想和大家分享一些把图片变成文 ...
html+css+js实现图片，文字，视频，背景音乐盛宴
你进来了吗? 好吧,如果你感受到了欺骗,请您退出吧! 人菜瘾大,时隔一年,终究还是选了web前端,回想去年写的第一条博客也是html,命运总是这么巧合,哈哈哈哈! html+css+js实现图片,文字 ...
职场小白如何将图片转文字？这个方法建议收藏使用！
有时我们需要记录一些东西,为了快速记录,我们会选择拍照或者截图,将这些内容以图片的形式保存下来,在后期再去重新整理.不过这个过程会花费我们很多时间.如果你们想知道怎样图片转文字的话,那就来看看这篇文章 ...
图片转文字怎么弄？图文转换方式说明
图片转文字技术是一种将图片中的文字内容自动转换为文字形式的技术,也被称为OCR技术(Optical Character Recognition). 目前市面上有很多图片转文字的软件,其中一些比较知名的 ...
图片文字怎么转换成文本？分享几个好方法
在我们日常的工作学习中,经常会用照片来记录重要的内容,可以快速记录,但是后期处理比较麻烦.我们可以直接将图片中的文字转换成可编辑的文字内容,这样会节省我们很多时间.那么图片文字怎么转换成文本呢?下面就 ...
js复制图片文字图文分享到微信/QQ，插件clipboard.js的应用案例
js复制图片-文字,可用于商品复制文案进行分享的功能~ 1.此案例应用到clipboard.js,具体使用可查阅文档: 2.这个框架功能还是比较强大的,复制文本和图片,复制成功后的html的标签会被去 ...
图片文字怎么转换成Word文档？教你两招快速解决
图片中的文字怎么把它转换成Word文档呢?大家在办公的过程中肯定有使用图片的时候,因为图片可以快速将重要的内容记录下来,至于后面的整理图片的时候,很多小伙伴就不想动了,因为需要将图片中的文字用键盘打出 ...
图片文字怎么转换成文本？可以试试这三种途径
上午收到同事发来的项目介绍,好家伙大几千字的内容全在一张长图上.其中仍有要修改的地方,看来只能先把图片文字转换成文本,再进行编辑了.有没有更快更准确的转换方法呢?这就来给各位说几种高效转换途径,如果你 ...

通过js实现图片与文字的转换

html部分

js部分

css部分

执行效果

通过js实现图片与文字的转换相关推荐

最新文章

热门文章