导航:首页 > 文字图片 > 点击图片出现文字

点击图片出现文字

发布时间:2022-01-09 01:38:30

如何在图片框中在单击后显示文字

<html>
<body>
<input type="text" id="textbox" />

<span class="label">/大笑</span>
<span class="label"><img src="/daxiao"></span>

<span class="label">/大哭</span>
<span class="label"><img src="/daku"></span></div>
</body>
<script type="text/javascript">

tb=document.getElementById('textbox');

spans=document.getElementsByTagName("span");

for(i=0;i<spans.length;i++){
if(spans[i].className=="label"){
spans[i].onclick=function(){
arr=tb.value.split(" ");
for(j=0;j<arr.length;j++){
if(arr[j]==this.innerHTML) return;
}
tb.value+=(" "+this.innerHTML);
}
}
}
</script>

</html><script type="text/javascript">
tb=document.getElementById('textbox');
spans=document.g www.hbbz08.com etElementsByTagName("span");
for(var i=0;i<spans.length;i++)
{
spans[i].index=i;
spans[i].onclick=function()
{
alert(spans[this.index-1].innerHTML);
}
}
</script>

Ⅱ js点击图片在文本框内显示文字

亲,改一下js代码,改成这样就可以了

<scripttype="text/javascript">
tb=document.getElementById('textbox');
spans=document.getElementsByTagName("span");
for(vari=0;i<spans.length;i++)
{
spans[i].index=i;
spans[i].onclick=function()
{
alert(spans[this.index-1].innerHTML);
}
}
</script>

Ⅲ CSS中点击图片出现对应的文字

大体类似于这样试试
<frameset cols="20%,*">
<frame src="1.html" />
<frame src="2.html" />
</frameset>

1.html
<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function init(){
var p=document.getElementsByTagName("p");
for(var i=0;i<p.length;i++){
p[i].onclick=test;
}
}
function test(){
var src=this.getAttribute("src");
var img=window.parent.frames[1].document.images[0];
img.setAttribute("src",src);
}
window.onload=init;
</script>
</head>

<body>
<p src="1.jpg">test1</p>
<p src="2.jpg">test2</p>
</body>
</html>

2.html
<!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=utf-8" />
<title>无标题文档</title>
</head>

<body>
<img src="3.jpg" />
</body>
</html>

Ⅳ html 点击图片显示文本

鼠标移动到图片上,显示文字,简单的方法是利用“title”。
例如:
<img src="/index/4.png" alt="HTML5在线制作" title="HTML5在线制作">
鼠标移动到4.png图片上时候,显示出“HTML5在线制作”

Ⅳ 【求教】用html代码制作 鼠标点击图片的时候出现图片框并在图片上显示文字

不知道这个是不是你要找的。

<head><style type="text/css">
#floater {
position: absolute;
left: 500;
top: 146;
width: 125;
visibility: visible;
z-index: 10;
}</style>
</head>

<body>

<div ID="floater" style="left: 590px; top: 158px">
<p align="center"><img SRC="2259.gif" alt="图片显示的文字" WIDTH="150" HEIGHT="60"><br>
<font color="#FF8040">网页特效</font></p>
</div><script LANGUAGE="JavaScript">
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
<!-- STALKER CODE -->
function heartBeat() {
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelTop += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelLeft += percent;
if(NS) document.floater.left += percent;
lastScrollX = lastScrollX + percent;
}
}
<!-- /STALKER CODE -->
<!-- DRAG DROP CODE -->
function checkFocus(x,y) {
stalkerx = document.floater.pageX;
stalkery = document.floater.pageY;
stalkerwidth = document.floater.clip.width;
stalkerheight = document.floater.clip.height;
if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
else return false;
}
function grabIt(e) {
if(IE) {
whichIt = event.srcElement;
while (whichIt.id.indexOf("floater") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; }
}
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
} else {
window.captureEvents(Event.MOUSEMOVE);
if(checkFocus (e.pageX,e.pageY)) {
whichIt = document.floater;
StalkerTouchedX = e.pageX-document.floater.pageX;
StalkerTouchedY = e.pageY-document.floater.pageY;
}
}
return true;
}
function moveIt(e) {
if (whichIt == null) { return false; }
if(IE) {
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX); distanceY = (newY - currentY);
currentX = newX; currentY = newY;
whichIt.style.pixelLeft += distanceX;
whichIt.style.pixelTop += distanceY;
if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
event.returnValue = false;
} else {
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
return false;
}
return false;
}
function dropIt() {
whichIt = null;
if(NS) window.releaseEvents (Event.MOUSEMOVE);
return true;
}
<!-- DRAG DROP CODE -->
if(NS) {
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
window.onmousedown = grabIt;
window.onmousemove = moveIt;
window.onmouseup = dropIt;
}
if(IE) {
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
</script>
</boyd>

Ⅵ 如何在ppt实现点击不同图片,出现不同的文字

在PPT2007中分别插入三个文本框分别输入A段文字、B段文字、C段文字,按shift键分别选中这三段文字或文本框——动画——自定义动画——添加效果——进入——出现或飞入,在右侧动画窗格把三个动画的“开始”全部设置成“单击时”。接着单击A段文字动画效果框后面的下拉箭头——计时——触发器——单击下列对象时启动效果:选苹果图片——确定,其他两个设置方法相同,分别设置香蕉、西瓜作触发器即可。

Ⅶ 鼠标点击图片后能够显示出文字的网页代码

只要单击图片,就会弹出一个对话框,在对话框中显示你要显示的文字

<html>
<head>
<script language="vbscript">
<!--
sub yt_onclick
msgbox"你好"
end sub
sub ty_onclick
msgbox"hello"
end sub
-->
</script>
</head>
<body>
<a href=# name=ty><img src="你要显示的图片"></a>
</body>
</html>

Ⅷ HTML/CSS 点击一个文字或者图片 弹出一个DIV。点击文字的不同,弹出的DIV也不同。

用js来做,首先设置2个隐藏的div,当电议某一个文字的时候用js促发某个div显示,并关闭原来显示的div。

Ⅸ 网页实现点击图片后图片消失显示文字

给你实现思路:

扑克翻页效果的原理在于利用眼睛观察物体的错觉,扑克翻页效果分解为两个步骤:

  1. 按扑克中轴线,以固定速率将img的width逐步变为0,这样扑克将消失;

  2. 动态替换img为扑克反面,以同样速率将img的width由0变为原宽度,完成翻页。


关键代码:

<div id="divad1" class="poker" style="text-align: center;">

<a onclick="javascript:flipPoker()" href="#"><img src="front.jpg" id="picad1" height="200" border="0" style="width: 200px; display: inline-block;"></a></div>


给这个div内的img元素绑定函数flipPoker

function flipPoker( ){

var tar = $('#picad1');

var origin = tar.attr('src');

var back = "back.jpg" //扑克背面图片名称

//以中轴线渐变将图片隐藏,并瞬间替换img图片内容

tar.animate({width:'0px'},"fast",function(){tar.attr('src',origin);});

//立即渐变还原图片width

tar.animate({width:'200px'},"fast");

}

=============

上述代码用到了jQuery1.8.3 的animate函数

html代码里的样式"text-align:center"很关键,没有这个样式,图片将会自左向右渐变,加了样式之后就是按中轴线渐变了


如果还不行就参考这个页面的代码:

http://vwfc-dealer.cneln.net/eln3_asp/index.do

Ⅹ 在flash中点击图片出现文字怎么

闲来无事帮你做好!有些细节还是自己调!

package ClickToDisplay {

import flash.display.Sprite;

import flash.display.Loader;

import flash.net.URLRequest;

import flash.events.MouseEvent;

import flash.text.TextField;

import com.greensock .TweenLite;

import com.greensock .easing.*;

import flash.events.Event;

import flash.display.Shape;

public class OneMc extends Sprite {

private var iamgepath:String ="";

private var iamgeName:String =""

private var textCont:Sprite

private var iamgeloader:Loader =new Loader

public function OneMc($path:String ,$name:String ) {

// constructor code

iamgepath=$path;

iamgeName=$name;

textCont=new Sprite

AddTo();

}

private function AddTo(){

iamgeloader.load (new URLRequest (iamgepath));

this.addChild (iamgeloader)

iamgeloader.contentLoaderInfo .addEventListener (Event.COMPLETE,loadiamgecom)

}

private function loadiamgecom(e:Event ){

iamgeloader .addEventListener(MouseEvent.CLICK,clicktheloader);

iamgeloader.addEventListener (MouseEvent.MOUSE_OUT,outmouse);

this.addChild (textCont)

textCont.y =-30;

}

public function get getName():String {

return iamgeName;

}

private function clicktheloader(e:MouseEvent ){

var textf:TextField =new TextField

textf.textColor =0XFF0000;

textf.text =iamgeName;

textCont.addChild (textf)

TweenLite.to (textCont,0.25,{y:0})

}

private function outmouse(e:MouseEvent ){

TweenLite.to (textCont,0.25,{y:-30});

}


}

}

主文件:、、、、


import ClickToDisplay.OneMc;


var nums:int=9

var rownum:int=3;

init()

function init(){

var path:String ="Image/page1.jpg"

for(var i:int=0;i<nums;i++){

var tmpone:OneMc =new OneMc(path,"Name"+i)

tmpone.x=i%rownum*(350+5)

tmpone.y=Math.floor (i/rownum)*(218+5)

this.addChild (tmpone)

}

}


阅读全文

与点击图片出现文字相关的资料

热点内容
动漫女生图片唯美长发 浏览:874
粉色裙子图片大全可爱 浏览:681
极简风格发型图片大全 浏览:791
简单国徽图片简笔画 浏览:271
流氓看美女的图片的图片 浏览:995
matlab怎么把图片变圆滑 浏览:57
七一建党节简单手抄报图片大全 浏览:286
烫螺丝头发型图片 浏览:448
微信头像憨厚男生图片 浏览:837
将其他软件的图片复制到word 浏览:282
excel上怎么图片 浏览:374
象形文字的图片大全 浏览:9
word插入图片齐对正 浏览:330
安哥拉猫可爱图片大全 浏览:889
男生失落雪地背影图片 浏览:586
王俊凯最可爱的图片 浏览:537
张都美高清图片 浏览:210
最简单的野钓装备图片 浏览:630
假发烫卷发型图片 浏览:338
农村平房车库图片大全 浏览:810