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如何点击替换图片相关的资料