[Thắc mắc] hỏi cách sử dụng lệnh hover và click để đổi 3 ảnh khác nhau

[arikbna]

Em muốn thỉnh giáo 1 đoạn code mà có 3 cái ảnh 
ảnh gốc ----- đưa chuột vào đổi sang----- ảnh thứ 2 click vào đổi sang----- ảnh thứ 3
ai biết code này cho em xin

[hunghsmn]

Có phải giống http://www.hunghsmn.info.vn/news/k_ni_m_di_n_dan/2013-03-08-56 không bạn ?
Nếu phải thì code đây:

Code:

<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
text-decoration: none!important;
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
top: -50px;
border: 1px dashed gray;
visibility: hidden;
color: #FFFFFF;
text-decoration: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-top:5px solid #6F6F6F;
border-right : 5px solid #6F6F6F;
border-bottom : 5px solid #6F6F6F;
border-left : 5px solid #6F6F6F;
}

.thumbnail span img{ /*CSS for enlarged image*/
border: 1px solid #AAA;
padding: 2px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-top : 5px solid #6F6F60;
border-right : 5px solid #6F6F60;
border-bottom : 5px solid #6F6F60;
border-left : 5px solid #6F6F60;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -50;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>

<a class="thumbnail" href="LINK ẢNH 3"><img src="LINK ẢNH 1" style="border: 2px solid #CCCCCC; border-radius:10px;box-shadow: 1px 2px 2px 3px #AAA;" height="116" hspace="4" vspace="4" width="160"><span><img src="LINK ẢNH2" height="320"><br>Văn bản chú thích sẽ hiện bên dưới ảnh 2</span></a>


Ghi chú: Bạn sửa lại CSS theo ý thích của bạn. Chú ý vị trí xuất hiện của ảnh 2 rất có thể không hợp với bạn

[arikbna]

ý bạn là cái menu hả
h mình muốn chuyển giữa 2 ảnh thôi thì ntn??

[hunghsmn]

Không, bạn kéo xuống dưới rồi rê chuột vào các tấm ảnh thumbnail thì thấy mà. Nó sé hiện lên tấm ảnh khác cùng với lời ghi chú cho tấm ảnh, nếu bạn bấm vào thì nó sẽ mở tấm ảnh khác ra (Trong trường hợp của mình thì cả 3 tấm là một, còn bạn vận dụng thì đổi lại link cho các tấm ảnh đó)
Nó như thế này nè:

[arikbna]

bây giờ muốn thêm link thì ntn ??
code này mình muốn bạn giúp mình

Code:

<div id="warp">
<div id="header">
    <div id="headerBox">
        <div id="logo">
            <div class="playnow" style="float: left; margin-top: 58px; margin-left: 101px;position: relative">
                <a class="a-server" href="/chon-server" title="Cần đăng nhập trước khi vào game"></a>
                <a class="a-reg" href="/dang-ky" title="Đăng ký"></a>
                <a class="a-napxu" href="/nap-xu" title="Cần đăng nhập trước khi nạp xu!!!"></a>
                <img src="http://i1307.photobucket.com/albums/s589/Mamoru_Kaiwan/playgame_zpsa646bbcb.gif">
            </div>
        </div>
        <div id="mainNav">
                <ul class="one">
                  <li><a href="forum" target="_blank"><span>Diễn đàn</span></a></li>
                  <li><a href="register"><span>Đăng ký</span></a></li>
                  <li><a href="/nap-xu"><span>Nạp xu</span></a></li>
                  <li><a href="/chuyen-muc/1/tin-tuc-su-kien"><span>Tin tức</span></a></li>
                  <li><a href="/chuyen-muc/4/huong-dan"><span>Hướng dẫn</span></a></li>
                  <li><a href="forum"><span>Trang chủ</span></a></li>
                </ul>
        </div>
    </div>

demo: http://thanthuykiem.forumvi.com/
mình muốn cái phần tải game đăng ký nạp thẻ 3 phần đó làm sao để khi đưa chuột vào bên đăng ký đăng nhập hoặc nạp thẻ nó ra cái hình khác ??

[hunghsmn]

Code đó là code thanh menu mà, đâu phải

ảnh gốc ----- đưa chuột vào đổi sang----- ảnh thứ 2 click vào đổi sang----- ảnh thứ 3

[hunghsmn]

Để xem nào. Có phải thế này không nhé: Có một hàng những ảnh nhỏ làm biểu tượng cho các games - Khi bạn rê chuột vào những ảnh nhỏ đó thì hiện lên ảnh khác lớn hơn , đó là cảnh trong games đó cùng với lời chú thích bên dưới - Và khi bạn click vào thì mở luôn games đó ra để chơi.

Phải vậy không? Nếu phải thì code code mình cho bạn là tốt rồi đấy, vận dung đi bạn

[arikbna]

ý mình là chuyển ảnh thì oke nhưng làm sao mà bỏ ảnh vào 3 cái ô đó có nghĩa đưa chuột vào thì nó đổi cái ảnh khác giống như là tầm được chọn ấy

[hunghsmn]

Bạn cho link ảnh  vào đoạn này

Code:

<a class="thumbnail" href="LINK ẢNH 3"> <img src="LINK ẢNH 1" style="border: 2px solid #CCCCCC; border-radius:10px;box-shadow: 1px 2px 2px 3px #AAA;" height="116" hspace="4" vspace="4" width="160"> <span><img src="LINK ẢNH2" height="320"><br> Văn bản chú thích sẽ hiện bên dưới ảnh 2</span> </a>

Bạn tiếp tục như vậy cho những ảnh khác, bao nhiêu ảnh tùy bạn.
Ở chỗ "LINK ẢNH 3" không nhất thiết phải là link ảnh mà có thể là link của một trang web khác, một trang games chẳng hạn.

Mình chỉ cho cái mẫu để bạn vận dụng chứ mình đâu có biết bạn dùng vào việc gì đâu mà viết cụ thể

[arikbna]

để mình thử

[arikbna]

không thấy nó chuyển động bạn ơi nó còn chồng cả hàng dọc 3 cái hình mới khổ chứ

[hunghsmn]

Bạn làm lỗi ở chỗ class="thumbnail"
Bạn vào đây xem, thử rê chuột, click thử
Được thì bạn view source để lấy code
http://trekhuyettat.sosforum.net/h211-page

[arikbna]

nhưng bạn biết áp dụng code đó vào 3 nút ở trên code không mình không biết add nó vào đó để cái hình đó là cái bình thường rồi 1 cái khác bỏ vào đổi màu và chạy nhanh và đậm hơn
cái bình thường thì 0 cần chia gì cả nhưng khi hover thì cần 3 cái hình nó đổi

[hunghsmn]

Tức quá vì không hiểu ý bạn Để các bạn khác giúp vậy

[arikbna]

Thôi nói rõ đây bây giờ nhá : mình có 1 cái forum skin của người ta mình đem về sửa lại cái chỗ tải game ... bla bla . Mà cái ảnh gốc của nó lại không có cái hover mà 0 biết sao người ta bỏ mấy cái chữ zô đúng chỗ mấy nút đó nhấn vào là nó bay qua link khác nhưng nó 0 có hover . Bây giờ mình muốn là cái hình đó vẫn đứng yên như vậy mà chén thêm 3 cái hover vào mấy chỗ mà người ta làm sẵn ý đưa chuột vào là nó đổi 1 cái hình khác không cần click đâu mà click là link rồi

h bạn đã hiểu ý mình chưa từ sáng đến h @@

[handsomevip007]

Đọc dữ lắm mới hiểu được ý bạn ~~"
Demo và Code http://jsbin.com/oDuBAkU/1/edit  

[arikbna]

Ôi nản thật thôi khỏi phứt tạp forum em đây http://thanthuykiem.forumvi.com/
thôi có nói cũng hơi khó hỉu giờ đơn giản em muốn làm giống bên ... http://phidoi.go.vn/ cái chỗ dowload khi đưa chuột vào hình chạy và tương tự nút đăng ký và nạp vcoin đưa chuột vào đổi cái ảnh bay ra ngoài ^^

acc test : test1 test1234 cần mục nào hay cái gì post lên đây để em đăng

tiện thể cho em hỏi sao mấy cái box của em nó nhiều quá cách hàng xuống có được không ??
và cái chatbox sao em làm đủ cách rồi mà nó vẫn không tự đăng nhập được

[arikbna]

Bữa nay forumvi bị gì hả anh sao lúc trước em làm mấy cái skin của mấy bác thì cái banner nó lấn ra ngoài còn giờ làm y chang mà nó chỉ bằng với khung forum

[Minion]

ý bạn đoạn flash à

[arikbna]

Phần nào bạn mình hỏi lần 3 cái nên chả biết bạn đang hỏi về phần nào ^^

[handsomevip007]

Kiểu bạn muốn nó là flash rồi không phải ảnh. Nếu muốn dùng ảnh thì xem lại bài của mình ở trên. 

[arikbna]

Cho mình hỏi muốn làm flash đó làm ntn cho nó ở trong baner

[arikbna]

có ai biết làm kiểu đó không ??

[Kid Knight]

bạn lên google gõ:

tạo silideshow online hoặc tạo banner flash, nó có nhiều dịch vụ free lắm

k cần phải dùng script hay code cho mất công

[arikbna]

tks bạn cách của bạn mình đã thử và rất thành công trong cái mục item mới thôi còn về phần click vào 3 phần khác nhau ra 3 cái ảnh thì vẫn chưa được nó chỉ cho phép click 1 link thôi bác và chỉ hover 1 hình trong cái khung của nó

[Sponsored content]