html如何點擊替換圖片_HTML中層疊的div里邊有圖片和漢字滑鼠點擊該div如何替換圖片和字體的顏色javaScript、jQuery都可以

❶ html中，點擊div，使其更換背景圖片，兩張圖片來回切換

稍等上代碼！

你好我寫的例子是用jquery來寫的，引用的網上的地址，你可以直接用。

<!DOCTYPEhtml>
<html>
<head>
<metacharset='utf-8'/>
<title>JSBin</title>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
.box1{
width:698px;
height:258px;
border:1pxsolid#ccc;
background:url(http://www.snowinmay.net/6rooms/html/img/gsh/gsh_banner3.jpg)no-repeat;
}
.changeBg{
background:url(http://www.snowinmay.net/6rooms/html/img/gsh/gsh_banner1.jpg)no-repeat;
}
</style>
</head>
<body>
<divclass="box1">

</div>
<script>
$(function(){
$('.box1').toggle(function(){
$(this).addClass('changeBg');
},function(){
$(this).removeClass('changeBg');
});

})
</script>
</body>
</html>

希望能幫你，有問題可以追問！

❷ 用HTML製作點擊滑鼠時切換圖片

點擊滑鼠，還是點擊按鈕，還是點擊圖片？

如果是點擊滑鼠，寫一個遮罩層，遮罩層為全透明rgba(0 ,0 ,0, 0).遮罩層設置點擊事件onclick 點擊後隱藏當前圖片，顯示另一張，用if。

點擊按鈕，你可以在按鈕上寫個點擊事件，默認當前為true 點擊後就變為false

var a=ture；

點擊後

a=a!;

一個圖片用a顯示，另一個圖片用!a顯示

當a為true 顯示一張圖，為false的時候顯示另一張圖。

點擊圖片

參考網頁鏈接

❸ html點擊按鈕時切換圖片的代碼

html點擊按鈕困悉時切換圖片的代碼如下：

<scriptsrc="http://libs..com/jquery/2.1.4/jquery.min.js"></script>

<style>

#hello{width:108px;height:108px;border:1pxsolid#369;overflow:hidden;margin:auto;}

#word{margin:auto;width:136px;}

</style>

<divid="hello">

<imgsrc="http://i1..com/it/u=2390401277,3891827753&fm=203">

<imgsrc="http://i1..com/it/u=3713675608,2219355047&fm=203">

<imgsrc="http://i2..com/it/u=695011303,1300693603&fm=203">

</div>

<div>

<inputtype="button"value="上一張"onclick="a()";>

<inputtype="button"value="下一張"onclick="b()";>

</div>

functiona(){

$('#hello').find('img').eq(0).appendTo($('#hello'));

}

functionb(){

$('#hello').find('img:last').eq(0).prependTo($('#hello'));

}

</script>

❹ HTML中層疊的div里邊有圖片和漢字，滑鼠點擊該div如何替換圖片和字體的顏色javaScript、jQuery都可以。

我們可以舉個例子：

html部分：

<divclass="aa">
<imgsrc="01.png">//換成你自己的圖片
<pclass="bb">adfadsf</p>//換成你自己的文字
</div>

jquery部分：

$(".aa").click(function(){
$(this).children("img").attr("src",'2.jpg');//改變圖片
$(".bb").css("color","red");//改變文字顏色
})

點擊前：

❺ 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" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
p,ul,li {
margin: 0;
padding: 0;
}

body,input {
font: 12px/ 1.5 Helvetica, Tahoma, Arial, \5b8b\4f53, sans-serif;
}

a {
text-decoration: none;
color: #000;
}

a:hover {
text-decoration: underline;
color: #000;
}

a img {
vertical-align: text-bottom;
}

.pic-news {
width: 295px;
}

.news-slider {
position: relative;
z-index: 88;
height: 200px;
padding: 3px 0 0 5px;
margin-bottom: 10px;
}

.news-slider .slides_container {
display: none;
position: relative;
width: 284px;
overflow: hidden;
}

.news-slider .slides_container div.slide {
display: block;
width: 284px;
height: 200px;
}

.news-slider .caption {
position: absolute;
bottom: -35px;
left: 0;
z-index: 500;
width: 204px;
height: 24px;
line-height: 24px;
_height: 30px;
overflow: hidden;
padding: 0 70px 0 10px;
border-top: 1px solid #000;
background: #000;
opacity: 0.8;
filter: alpha(opacity = 80);
color: #fff;
text-shadow: none;
}

.news-slider .pagination {
position: absolute;
bottom: 0;
right: 0;
z-index: 99;
height: 16px;
width: 70px;
}

.news-slider .pagination li {
float: left;
margin: 0 2px;
list-style: none;
}

.news-slider .pagination li a {
float: left;
display: block;
width: 8px;
height: 8px;
overflow: hidden;
background: url(../images/pagination.png);
_background: url(../images/pagination.gif);
font-size: 0;
}

.news-slider .pagination li.current a {
background-position: 0 -12px;
}
</style>
</head>
<body>
<div class="fl pic-news">
<div id="J_news_slider" class="news-slider">
<div class="slides_container">
<div class="slide">
<img src="images/slider/s1.jpg" width="態或攔300" height="206" alt="" />
<div class="caption" style="bottom: 0">
<p>
圖1
</p>
</div>
</div>
<div class="slide">
<img src="images/slider/s2.jpg" width="300" height="206" alt="" />
<div class="caption">
<p>
圖2
</p>
</div>
</div>
<div class="slide">
<img src="images/slider/s3.jpg" width="300" height="206" alt="" />
<div class="caption">
<p>
圖3
</p>
</div>
</div>
<div class="slide">
<img src="images/slider/s4.jpg" width="300" height="206" alt="" />
<div class="caption">
<p>
圖4
</p>
</div>
</div>
<div class="slide">
<img src="images/slider/s5.jpg" width="300" height="206" alt="" />
<div class="caption">
<p>
圖5
</p>
</div>
</div>
</div>
<ul class="pagination">
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
</ul>
</div>
</div>

<script type="text/javascript" src="js/libs/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/libs/slides.min.jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if($('#J_news_slider').length>0){
/*slides*/
$('#J_news_slider').slides({
preload: true,
preloadImage: 'images/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
generateNextPrev: false,
generatePagination: false,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
}
});
</script>
</body>
</html>
圖片放/image/slider/目錄下，最後,jquery-1.6.2.min.js與slides.min.jquery.js可在網上下載，放在/js/libs/目錄下

❻ html5點擊鏈接在框架內更換圖片

你好這種效果很簡單的採用jquery 然後假設另一張圖片名叫 a.gif 並且和 depart_info_close.gif存放在同一個文件夾下給a標簽新加一個屬性 id="a" 然後按照你提供的高襲 html結構代碼如戚謹兄下
$(function(){
$("#a").click(function(){
$(this).prev().attr({"src":"a.gif"});
});
})
這樣子就好了
代碼的晌拆意思是當點擊a標簽時尋找與他同級的並且在他之前的那一個元素也就是img標簽
並且改變 img標簽中的 src屬性為 a.gif
希望能幫到你謝謝

❼ html中如何滑鼠點擊更換背景圖片

html中滑鼠點擊更換背景圖片的方法：

1、html代碼：

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

2、css代碼：

ul.menu > li > a{

float:left;

width:265px;

height:50px;

margin-top:450px;

text-align:center;

line-height:50px;

color:#ddd;

background-color:#333;

letter-spacing:1px;

cursor:pointer;

text-decoration:none;

text-shadow:0px 0px 1px #fff;

}

ul.menu > li ul{

list-style:none;

float:left;

margin-top:-180px;

width:100%;

height:110px;

padding-top:20px;

background-repeat:no-repeat;

background-color:transparent;

}

ul.menu > li ul li{

display:none;

}

ul.menu > li ul.sub1 {

background-image: url('../img/bg1sub.png');

}

ul.menu > li ul.sub2 {

background-image: url('../img/bg2sub.png');

}

ul.menu > li ul.sub3{

background-image:url(../img/bg3sub.png);

}

ul.menu > li ul li a{

color:#fff;

text-decoration:none;

line-height:30px;

margin-left:20px;

text-shadow:1px 1px 1px #444;

font-size:11px;

}

ul.menu > li ul li a:hover{

border-bottom:1px dotted #fff;

}

ul.menu > li ul.sub1 li{

display:block;

}

3、js代碼：

if (!document.defaultView || !document.defaultView.getComputedStyle) { // IE6-IE8

var oldCurCSS = jQuery.curCSS;

jQuery.curCSS = function (elem, name, force) {

if (name === 'background-position') {

name = 'backgroundPosition';

}

if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name]) {

return oldCurCSS.apply(this, arguments);

}

var style = elem.style;

if (!force && style && style[name]) {

return style[name];

}

return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force);

};

}

var oldAnim = $.fn.animate;

$.fn.animate = function (prop) {

if ('background-position' in prop) {

prop.backgroundPosition = prop['background-position'];

delete prop['background-position'];

}

if ('backgroundPosition' in prop) {

prop.backgroundPosition = '(' + prop.backgroundPosition;

}

return oldAnim.apply(this, arguments);

};

function toArray(strg) {

strg = strg.replace(/left|top/g, '0px');

strg = strg.replace(/right|bottom/g, '100%');

strg = strg.replace(/([0-9.]+)(s|)|$)/g, "$1px$2");

var res = strg.match(/(-?[0-9.]+)(px|\%|em|pt)s(-?[0-9.]+)(px|\%|em|pt)/);

return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]];

}

4、實現效果

導航:首頁 > 圖片大全 > html如何點擊替換圖片

html如何點擊替換圖片

與html如何點擊替換圖片相關的資料