网页上选中图片后高亮显示

howema 2009-11-26 04:23:13
网页上横放5张图片，想在点击某张图片后，该图片高亮显示，其它的不变，点击另外一张，前面一张恢复，新图片高亮显示。请高人指点，最好有代码，小弟菜鸟.谢谢
...全文
343 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
howema 2009-11-27
  • 打赏
  • 举报
 回复
太牛了 谢谢了
马上结贴！！
passself 2009-11-27
  • 打赏
  • 举报
 回复
变成高亮的话是用另一张图片代替的，不是楼上所说的，楼主你自己就可以做的，比如你每次刷新的时候就换成另一张图片
bing475879749 2009-11-27
  • 打赏
  • 举报
 回复
更正下
<!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">

<style type="text/css"> 

img{ float:left; margin:10px; cursor:pointer;}

.filter{filter:alpha(opacity=20);-moz-opacity:0.2;}

</style>

<script type="text/javascript"> 

window.onload=function(){

    var thepic=parseInt(document.cookie.split(";")[0].split("=")[1])+1;

    //thepic="";

    var img=document.getElementsByTagName("img");

    var L=img.length;

    for(i=0;i<L;i++){

        img[i].className="filter";

        img[i].onclick=Function("clear("+i+");this.className=''");

    }

    if(thepic){

      img[thepic-1].className='';

    }

}

function clear(i){

    expireDate=new Date;   

    expireDate.setYear(expireDate.getYear()+1);   

    document.cookie="thepic="+i; 

    var img=document.getElementsByTagName("img");

    var L=img.length;

    for(i=0;i<L;i++){

        img[i].className="filter";

    }    

}

</script>

<body>

<img src="http://www.hao123.com/images/logo_140.gif" />

<img src="http://www.hao123.com/images/logo_140.gif" />

<img src="http://www.hao123.com/images/logo_140.gif" />

<img src="http://www.hao123.com/images/logo_140.gif" />

<img src="http://www.hao123.com/images/logo_140.gif" />

 

</body>

</html>
bing475879749 2009-11-27
  • 打赏
  • 举报
 回复
如你所愿了不，结贴吧，LZ

<!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">

<style type="text/css"> 

img{ float:left; margin:10px; cursor:pointer;}

.filter{filter:alpha(opacity=20);-moz-opacity:0.2;}

</style>

<script type="text/javascript"> 

window.onload=function(){

    var thepic=parseInt(document.cookie.split(";")[0].split("=")[1]);

    var img=document.getElementsByTagName("img");

    var L=img.length;

    for(i=0;i<L;i++){

        img[i].className="filter";

        img[i].onclick=Function("clear("+i+");this.className=''");

    }

    if(thepic){

        img[thepic].className='';

    }

}

function clear(i){

    expireDate=new Date;   

    expireDate.setYear(expireDate.getYear()+1);   

    document.cookie="thepic="+i; 

    var img=document.getElementsByTagName("img");

    var L=img.length;

    for(i=0;i<L;i++){

        img[i].className="filter";

    }    

}

</script>

<body>

<img src="http://www.hao123.com/images/logo_140.gif" />

<img src="http://www.hao123.com/images/logo_140.gif" />

<img src="http://www.hao123.com/images/logo_140.gif" />

<img src="http://www.hao123.com/images/logo_140.gif" />

<img src="http://www.hao123.com/images/logo_140.gif" />

 

</body>

</html>
howema 2009-11-26
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 bing475879749 的回复:]
是这样子的么
HTML code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><styletype="text/css">
img{ float:left; margin:10px; cursor:pointer;}
.filter{filter:alpha(opacity=20);-moz-opacity:0.2;}</style><scripttype="text/javascript">
window.onload=function(){var img=document.getElementsByTagName("img");var L=img.length;for(i=0;i<L;i++){
img[i].className="filter";
img[i].onclick=Function("clear();this.className=''");
}
}function clear(){var img=document.getElementsByTagName("img");var L=img.length;for(i=0;i<L;i++){
img[i].className="filter";
}
}</script><body><imgsrc="http://www.hao123.com/images/logo_140.gif"/><imgsrc="http://www.hao123.com/images/logo_140.gif"/><imgsrc="http://www.hao123.com/images/logo_140.gif"/><imgsrc="http://www.hao123.com/images/logo_140.gif"/><imgsrc="http://www.hao123.com/images/logo_140.gif"/></body></html>
[/Quote]

刷新后还是会恢复回去，我想在页面刷新后仍然是刷新前那个显示状态。怎么改呢？
howema 2009-11-26
  • 打赏
  • 举报
 回复
有例子吗？ajax没用过
howema 2009-11-26
  • 打赏
  • 举报
 回复
如何只刷新table的其中一行？
bing475879749 2009-11-26
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 howema 的回复:]
我想用网页局部刷新来解决这个问题，但是不知道怎么局部刷新？
[/Quote]

用AJAX调用要刷新的部分
howema 2009-11-26
  • 打赏
  • 举报
 回复
我想用网页局部刷新来解决这个问题，但是不知道怎么局部刷新？
bing475879749 2009-11-26
  • 打赏
  • 举报
 回复
是这样子的么
<!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">

<style type="text/css"> 

img{ float:left; margin:10px; cursor:pointer;}

.filter{filter:alpha(opacity=20);-moz-opacity:0.2;}

</style>

<script type="text/javascript"> 

window.onload=function(){

	var img=document.getElementsByTagName("img");

	var L=img.length;

	for(i=0;i<L;i++){

		img[i].className="filter";

		img[i].onclick=Function("clear();this.className=''");

	}

}

function clear(){

	var img=document.getElementsByTagName("img");

	var L=img.length;

	for(i=0;i<L;i++){

		img[i].className="filter";

	}	

}

</script>

<body>

<img src="http://www.hao123.com/images/logo_140.gif" />

<img src="http://www.hao123.com/images/logo_140.gif" />

<img src="http://www.hao123.com/images/logo_140.gif" />

<img src="http://www.hao123.com/images/logo_140.gif" />

<img src="http://www.hao123.com/images/logo_140.gif" />

 

</body>

</html>
打字员 2009-11-26
  • 打赏
  • 举报
 回复
cookies
howema 2009-11-26
  • 打赏
  • 举报
 回复
搞定了，
但是有个问题，网页刷新后，图片都恢复了，我想要的结果是只有点击才高亮显示，网页刷新不能改变当前的显示状态！怎么实现？
howema 2009-11-26
  • 打赏
  • 举报
 回复
谢谢二楼，还是不知道怎么搞，有没有类似的代码可以参考的？
howema 2009-11-26
  • 打赏
  • 举报
 回复
高手帮忙！！
xiangtanboy 2009-11-26
  • 打赏
  • 举报
 回复
点的时候, 先全部恢复, 再将点的那张高亮
js漂亮图片选中效果
js漂亮图片选中效果 JQuery,div+css,网页特效,广告设计
jQuery选中城市高亮显示代码
jQuery选中城市高亮显示代码是一款中国地图选中城市高亮显示代码。
jQuery下拉框图片选择特效imageselect.js示例
jQuery基于imageselect.js插件的示例，下拉框图片选择特效，在Select下拉框中使用图片，并选择图片的功能，加入了一些特效，不仅仅是图片选择。
JavaScript动态树型菜单(带有参数说明)
一个国外网站下载下来的很不错的JavaScript动态树型菜单,为方便大家，本人对其中的部分参说做了小小说明^_^
利用jQuery极简代码完成选中部分高亮显示效果
当我们在制作一个网页时，常常会有想要选中部分高亮的需求，那么怎么用jQuery的极简代码完成这件事呢？ 可以看到，三个图片中，当我们的鼠标移到哪个上面，哪个就从中脱颖而出，其实这只需要一段非常简单的代码即可完成 $(function() { //设置鼠标进入的时候,其他的li标签透明度：0.5 $(".wrap li").hover(function() { $(this).siblings().stop().fadeTo(400, 0.5); }, function() { // 设置鼠标离开，
JavaScript

87,992

社区成员

224,698

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章