導航:首頁 > 文字圖片 > 點擊圖片出現文字

點擊圖片出現文字

發布時間: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