2013-07-17 74 views

Trả lời

3

Không - CSS chỉ có thể được sử dụng để thay đổi hình ảnh nền CSS, không nội dung HTML.

Trong phần tử giao diện người dùng chung (không phải nội dung) phải được hiển thị bằng cách sử dụng nền CSS. Các lớp trao đổi có thể trao đổi hình ảnh nền.

+1

Cảm ơn. Giải quyết :) – bonaca

+14

Sai - Bạn có thể dễ dàng thực hiện điều này với CSS3 và thuộc tính 'content', xem tại đây: http://stackoverflow.com/questions/2182716/how-can-we-specify-src-attribute-of-img -tag-in-css # answer-11484688 – Timo

+5

Cập nhật: thuộc tính nội dung chỉ hoạt động trong Webkit/Chrome - Không có trong FF hoặc IE. – Timo

2

Bạn không thể đặt hình ảnh thuộc tính src qua CSS. bạn có thể nhận được, như thể bạn muốn đặt sử dụng background hoặc background-image.

3

bạn có thể thử một cái gì đó như thế này

<img id="btnUp" src="empty.png" alt="btnUp" /> 

hoặc

<div id="btnUp" title="btnUp"> <div/> 

#btnUp{ 
    cursor:pointer; 
    width:50px; 
    height:50px; 
    float:left;  
} 

#btnUp{ 
    background-image:url('x.png') 
} 

#btnUp:hover{ 
    background-image:url('y.png') 
} 
1

Bạn có thể sử dụng một hỗn hợp của JavaScript và CSS để đạt được điều này, nhưng bạn không thể làm điều này chỉ với CSS. <img id="btnUp" src="empty.png" alt="btnUp" onmouseover="change(img)" onmouseout="changeback(img)" /> Thay vì img bạn sẽ đặt tên tệp sans loại tệp.

function change(img){ 
document.getElementById("btnUp").src= img + ".png"; 
} 
function changeback(img){ 
document.getElementById("btnUp").src= img + ".png"; 
} 

Sau đó, bạn sử dụng CSS để sửa đổi thẻ img hoặc id theo ý thích của mình.

3

Bạn có thể sử dụng CSS thành a) làm cho hình ảnh gốc ẩn đi bằng cách đặt chiều rộng và chiều cao thành 0 hoặc di chuyển nó ra ngoài màn hình vv và b) chèn hình ảnh mới vào :: trước hoặc sau pseudo -thành phần.

Đó sẽ là một lần truy cập hiệu suất mặc dù khi trình duyệt sau đó sẽ tải cả ảnh gốc và hình ảnh mới. Nhưng nó sẽ không yêu cầu Javascript!

21

Bạn có thể sử dụng:

content: url("/_layouts/images/GEARS_AN.GIF") 
+0

Tại sao bạn lại downvote? Đây là câu trả lời chính xác. – Timo

+9

Cập nhật: Có vẻ như điều này chỉ hoạt động trong webkit/Chrome nhưng không hoạt động trong FF hoặc IE. – Timo

+0

Điều đó sẽ không hoạt động trong Firefox –

14

Có một cách khác để khắc phục điều này: sử dụng CSS hộp cỡ.

HTML:

<img class="banner" src="http://domaine.com/banner.png"> 

CSS:

.banner { 
    display: block; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    background: url(http://domain2.com/newbanner.png) no-repeat; 
    width: 180px; /* Width of new image */ 
    height: 236px; /* Height of new image */ 
    padding-left: 180px; /* Equal to width of new image */ 
} 

http://css-tricks.com/replace-the-image-in-an-img-with-css/

+0

tiện ích này dành cho tôi – RozzA

+0

bạn là người chào đón bạn :) –

+0

có đây là giải pháp –

Các vấn đề liên quan