chanhtong1
20-01-2009, 16:45
Chào các bạn, mình đang muốn làm một cái module như thế này mà không biết dùng Css hay dùng javascript.
Giả sử mình có 3 cái <div ảnh nhỏ> và 1 cái <div ảnh to>. Khi rê chuột qua các <div ảnh nhỏ > thì cái <div ảnh to> sẽ hiển thị ảnh phóng to của cái ảnh nhỏ kia.
Cái này thì ở trang web : http://noithatdep.net/ có làm, nhưng là làm bằng Javascript. Mình muốn hỏi là cái này làm bằng Css có được không.
Mình cũng có một chương trình làm bằng CSS :
File Css:
#link
{
position:absolute;
top:100px;
left:25px;
width:150px;
height:300px;
}
#link a
{
display:block;
font-weight:bold;
text-decoration:none;
text-align:center;
padding:10px;
color:#c00;
border:1px solid black;
}
#link a:hover
{
color:#c00;
background-color:#fff;
}
#link a:span
{
display:inline;
}
#link a:hover span
{
display: block;
position:absolute;
top:50px;
left:225px;
width:150px;
padding:5px;
color:#fff;
background-color:Black;
}
li
{
list-style-type:none;
padding:10px;
}
//////////////////////////////////////////////////////////////
File html:
<ul id="link">
<li>
<a href="http://dantri.com.vn" >sdsd<span> fdfdfdfdfdfdfdfdff</span></a>
</li>
<li > <a href="http://dantri.com.vn" >dfdfd <span> dan tri .com.vn</span></a> </li>
<li> <a href="http://vnexpress.net" > vnexpress.net<span > la trang web thong tin</span></a></li>
</ul>
Cái này làm thì có vẻ giống như cái mình muốn làm nhưng nếu muốn sử dụng nó trong một trang web hoàn chỉnh thì thấy rất khó vì cái <div phóng to> được đặt cố định không thể phù hợp với các div khác trong giao diện trang web được.
[=========> Bổ sung bài viết <=========]
Cái này làm thì có vẻ giống như cái mình muốn làm nhưng nếu muốn sử dụng nó trong một trang web hoàn chỉnh thì thấy rất khó vì cái <div phóng to> được đặt cố định không thể phù hợp với các div khác trong giao diện trang web được.
Đoạn này có thể hơi lủng củng khó hiểu, ý mình muốn làm cái giống như trang web http://noithatdep.net/, nhưng làm bằng CSS. Bạn nào biết thì giúp mình với nhé, xin cảm ơn
Giả sử mình có 3 cái <div ảnh nhỏ> và 1 cái <div ảnh to>. Khi rê chuột qua các <div ảnh nhỏ > thì cái <div ảnh to> sẽ hiển thị ảnh phóng to của cái ảnh nhỏ kia.
Cái này thì ở trang web : http://noithatdep.net/ có làm, nhưng là làm bằng Javascript. Mình muốn hỏi là cái này làm bằng Css có được không.
Mình cũng có một chương trình làm bằng CSS :
File Css:
#link
{
position:absolute;
top:100px;
left:25px;
width:150px;
height:300px;
}
#link a
{
display:block;
font-weight:bold;
text-decoration:none;
text-align:center;
padding:10px;
color:#c00;
border:1px solid black;
}
#link a:hover
{
color:#c00;
background-color:#fff;
}
#link a:span
{
display:inline;
}
#link a:hover span
{
display: block;
position:absolute;
top:50px;
left:225px;
width:150px;
padding:5px;
color:#fff;
background-color:Black;
}
li
{
list-style-type:none;
padding:10px;
}
//////////////////////////////////////////////////////////////
File html:
<ul id="link">
<li>
<a href="http://dantri.com.vn" >sdsd<span> fdfdfdfdfdfdfdfdff</span></a>
</li>
<li > <a href="http://dantri.com.vn" >dfdfd <span> dan tri .com.vn</span></a> </li>
<li> <a href="http://vnexpress.net" > vnexpress.net<span > la trang web thong tin</span></a></li>
</ul>
Cái này làm thì có vẻ giống như cái mình muốn làm nhưng nếu muốn sử dụng nó trong một trang web hoàn chỉnh thì thấy rất khó vì cái <div phóng to> được đặt cố định không thể phù hợp với các div khác trong giao diện trang web được.
[=========> Bổ sung bài viết <=========]
Cái này làm thì có vẻ giống như cái mình muốn làm nhưng nếu muốn sử dụng nó trong một trang web hoàn chỉnh thì thấy rất khó vì cái <div phóng to> được đặt cố định không thể phù hợp với các div khác trong giao diện trang web được.
Đoạn này có thể hơi lủng củng khó hiểu, ý mình muốn làm cái giống như trang web http://noithatdep.net/, nhưng làm bằng CSS. Bạn nào biết thì giúp mình với nhé, xin cảm ơn