0
다음 예제에서는 이미지 또는 텍스트 위에 마우스를 올려 놓았을 때 이미지 및 텍스트가 마우스를 가리킬 때 표시해야합니다. 나는 첫 번째 제품에 대한 개발을 해왔지만, 다른 제품들에 대해서도이 작업을 수행 할 필요가있다. 이것을 어떻게 성취합니까?이미지와 텍스트 모두 강조 표시
호버링은 각 요소에 대해 별도의 ID를 제공하지 않고 분리되어야합니다. 조언
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="Slider.css">
<link rel="stylesheet" href="a.css">
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.0-packed.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.mousewheel.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.transit.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.ba-throttle-debounce.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
// Basic carousel, no options
$('#foo0').carouFredSel();
// Basic carousel + timer, using CSS-transitions
$('#foo1').carouFredSel({
auto: {
pauseOnHover: 'resume',
progress: '#timer1'
}
}, {
transition: true
});
// Scrolled by user interaction
$('#foo2').carouFredSel({
auto: false,
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
mousewheel: true,
swipe: {
onMouse: true,
onTouch: true
}
});
// Variable number of visible items with variable sizes
$('#foo3').carouFredSel({
width: 360,
height: 'auto',
prev: '#prev3',
next: '#next3',
auto: false
});
// Responsive layout, resizing the items
$('#foo4').carouFredSel({
responsive: true,
width: '100%',
scroll: 2,
items: {
width: 400,
// height: '30%', // optionally resize item-height
visible: {
min: 2,
max: 6
}
}
});
// Fuild layout, centering the items
$('#foo5').carouFredSel({
width: '100%',
scroll: 2
});
});
</script>
<script language="javascript">
function hightlight()
{
document.getElementById("textspan").style.color = "blue";
document.getElementById("ul").style.border = "1.5px solid black";
//document.getElementById("textspan").setStyle("color","blue");
//document.getElementById("ul").setStyle("border","1px solid blue");
}
function removehightlight()
{
document.getElementById("textspan").style.color = "black";
document.getElementById("ul").style.border = "1px solid #999";
}
</script>
<style type="text/css">
<!--
.style3 {color: #000000}
-->
</style>
</head>
<body>
<table id="Main" >
<tr>
<td class="tb 1 clearfix"><a id="prev2" class="button" href="a.css"></a></td>
<td id="tb2" class="list_carousel">
<div id="foo2">
<table id="product"><tr><td id="picbox"><div id="ul" onmouseover="hightlight()" onmouseout="removehightlight()"> <img src="Images/Laptop.JPG" alt="picture"></div></td></tr><tr><td onmouseover="hightlight()" onmouseout="removehightlight()"><a class="style1" href="http://etrege.com/ebay_new/index.php"><span class="style3" id="textspan" >This is a product</span></a></td>
</tr><tr><td> </td></tr><tr><td> </td></tr><tr><td> </td></tr><tr>
<td> </td>
</tr></table>
<table id="product"><tr><td id="picbox"><div id="ul" onmouseover="hightlight()" onmouseout="removehightlight()"> <img src="Images/Handbags1.jpg" alt="picture"></div></td></tr><tr><td onmouseover="hightlight()" onmouseout="removehightlight()"><a class="style1" href="http://etrege.com/ebay_new/index.php"><span class="style3" id="textspan" >This is a product</span></a></td>
</tr><tr><td> </td></tr><tr><td> </td></tr><tr><td> </td></tr><tr>
<td> </td>
</tr></table>
<table id="product"><tr><td id="picbox"><div id="ul" onmouseover="hightlight()" onmouseout="removehightlight()"> <img src="Images/Wafflemaker.jpg" alt="picture"></div></td></tr><tr><td onmouseover="hightlight()" onmouseout="removehightlight()"><a class="style1" href="http://etrege.com/ebay_new/index.php"><span class="style3" id="textspan" >This is a product</span></a></td>
</tr><tr><td> </td></tr><tr><td> </td></tr><tr><td> </td></tr><tr>
<td> </td>
</tr></table>
<table id="product"><tr><td id="picbox"><div id="ul" onmouseover="hightlight()" onmouseout="removehightlight()"> <img src="Images/camera.jpg" alt="picture"></div></td></tr><tr><td onmouseover="hightlight()" onmouseout="removehightlight()"><a class="style1" href="http://etrege.com/ebay_new/index.php"><span class="style3" id="textspan" >This is a product</span></a></td>
</tr><tr><td> </td></tr><tr><td> </td></tr><tr><td> </td></tr><tr>
<td> </td>
</tr></table>
<table id="product"><tr><td id="picbox"><div id="ul" onmouseover="hightlight()" onmouseout="removehightlight()"> <img src="Images/Laptop.JPG" alt="picture"></div></td></tr><tr><td onmouseover="hightlight()" onmouseout="removehightlight()"><a class="style1" href="http://etrege.com/ebay_new/index.php"><span class="style3" id="textspan" >This is a product</span></a></td>
</tr><tr><td> </td></tr><tr><td> </td></tr><tr><td> </td></tr><tr>
<td> </td>
</tr></table>
</div></td>
<td id="tb3" class="clearfix"><a id="next2" class="button" href="a.css"></a></td>
</tr>
</table>
<br />
</body>
</html>
이것은 유효한 마크 업이 아닙니다. '다중 elems와 같은 id ' – Jai