从Html而不是Css加载图像源

时间:2016-11-03 20:05:02

标签: html css image focus

我一直在使用Focus的缩略图轮播的一些代码,我只是想知道是否有可能模仿轮播的功能,但改变图像是在html中加载而不是必须有图像网址css。使用焦点时可以做到吗?

HTML:

<button class="mdT mdI1" ></button>
<button class="mdT mdI2" ></button>
<button class="mdT mdI3" ></button>
<button class="mdT mdI4" ></button>

的CSS:

.mdT {
        width:96px;
        height:96px;
        border:0px;
        outline:0;
        vertical-align:middle;
        background-color:#AAAAAA;
    }
    .mdT:focus {
        width:256px;
        height:256px;
    }

/* Change Images Depending On Focus */
    .mdI1       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img1');     }
    .mdI1:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+1');   }
    .mdI2       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img2');     }
    .mdI2:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+2');   }
    .mdI3       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img3');     }
    .mdI3:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+3');   }
    .mdI4       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img4');     }
    .mdI4:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+4');   }

http://jsfiddle.net/1h68hs7n/

1 个答案:

答案 0 :(得分:2)

是的,就像这个<div style="background-image: url(...)"></div>

说到:focus,没有,但使用mouseover可能是一种选择。

更新

如果可以添加内部元素,您可以这样做

.mdT {
  position: relative;
  width:96px;
  height:96px;
  border:0px;
  outline:0;
  vertical-align:middle;
  background-color:#AAAAAA;
}
.mdT:focus {
  width:256px;
  height:256px;
}
.mdT span  {
  display: none;
}
.mdT:focus span  {
  display: inline-block;
  position: absolute;
  left: 0; top: 0;
  right: 0; bottom: 0;
}
<button class="mdT" style="background-image:url(http://placehold.it/96x96/AAAAAA&text=img1">
  <span style="background-image:url(http://placehold.it/256x256/555555&text=Image+1"></span>
</button>

<button class="mdT" style="background-image:url(http://placehold.it/96x96/AAAAAA&text=img2">
  <span style="background-image:url(http://placehold.it/256x256/555555&text=Image+2"></span>
</button>