Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > คือจะทำ css แบบเอาเมาส์ชี้ที่รูปแล้วโชว์ detail แทน แต่ว่าทำไม่สำเร็จ

คือจะทำ css แบบเอาเมาส์ชี้ที่รูปแล้วโชว์ detail แทน แต่ว่าทำไม่สำเร็จ

เริ่มหัวข้อใหม่

^-^

โพสกระทู้ ( 681 )
บทความ ( 0 )

คือจะทำ css แบบเอาเมาส์ชี้ที่รูปแล้วโชว์ detail แทน แต่ว่าทำไม่สำเร็จเลยอยากจะให้เพื่อนๆ พี่ ช่วย
ดูโค้ดให้หน่อยว่ามันผิดตรงไหนครับ มันไม่ยอมบังให้เลยครับ

ลิงค์ตัวอย่าง http://aceinfowayindia.com/blog/2010/02/how-to-create-simple-css-image-rollover-effect/

Code (PHP)

<div class="c_images">
    <?
    	$strSQL = "SELECT * FROM product WHERE StatusMovie='New' limit 4";
		$objQuery = mysql_query($strSQL)or die (mysql_error());
		echo"<table border=\"0\" width=\"730\"  cellspacing=\"1\" cellpadding=\"1\"><tr>";
		$intRows = 0;
		while($objResult = mysql_fetch_array($objQuery))
		{
			echo "<td>"; 
			$intRows++;
	?>
			<div align="center">
				<div class="rollover_img"><img src="uploads/<?=$objResult["Picture"];?>" border="0">//บรรทัดนี้ครับ
				<span><?=$objResult["ProductName"];?></span></div> //บรรทัดนี้ครับ                               
			</div>
	<?
			echo"</td>";
			if(($intRows)%4==0)
			{
				echo"</tr>";
			}
		}
		echo"</tr></table>";
	?>
    <br />
    </div>

Tag : PHP, MySQL, HTML/CSS, jQuery

Date : 2012-07-16 17:22:19

By : nottpoo

View : 2747

Reply : 4

No. 1

เด็กโง่

โพสกระทู้ ( 275 )
บทความ ( 0 )

แท็ก <div class="rollover_img"> แล้วตามดว้ย แท็ก <a> หรือเปล่าครับ อันนี้ก็ไม่แน่ใจ แหะๆ

Date : 2012-07-16 18:03:33

By : เด็กโง่

No. 2

Th@iDev

โพสกระทู้ ( 206 )
บทความ ( 0 )

ใส่ Tag ไม่ครบป่าวคะ เพราะดูตาม css แล้วมันจะทำงานตาม a.hover ค่ะ

Date : 2012-07-16 19:29:36

By : Th@iDev

No. 3

Guest

ช่วยดูอีกรอบหน่อยดึง title มาข้างบนยังไงอะ
Code (PHP)

/*Simple Css Image Rollover Effect*/
*{ 
padding:0; 
margin:0;
}

body{ 
font:100% normal Arial, Helvetica, sans-serif;
}

.rollover_img { 
width: 150px; 
height: 200px; 
/*background-image: url(uploads/images1.jpg); */
background-position: top; 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
border:3px solid #ccc; 
font:13px normal Arial, Helvetica, sans-serif; 
line-height:20px; 
float:left; 
margin:0 10px 10px 0;
}

.rollover_img a { 
color: #000; 
width: 150px; 
height: 100px; 
display: block; 
text-decoration: none; 
}

.rollover_img a:hover { 
background:#000; 
opacity:.60; 
filter:alpha(opacity=60); 
}

.rollover_img a span { 
display: none; 
width: 150px; 
padding:0px; 
}

.rollover_img a:hover span { 
display: block; 
}

Code (PHP)

<div align="center">
<div class="rollover_img"><a title="<?=$objResult["ProductName"];?>" href="#"><img src="uploads/<?=$objResult["Picture"];?>" border="0">
<span><?=$objResult["ProductName"];?><br>&nbsp;DETAIL&nbsp;|&nbsp;CART&nbsp;</span></a></div> 
</div>

Date : 2012-07-17 10:27:21

By : nottpoo

No. 4

^-^

โพสกระทู้ ( 681 )
บทความ ( 0 )

ช่วยดูอีกรอบหน่อยดึง title มาข้างบนยังไงอะ
Code (PHP)

/*Simple Css Image Rollover Effect*/
*{ 
padding:0; 
margin:0;
}

body{ 
font:100% normal Arial, Helvetica, sans-serif;
}

.rollover_img { 
width: 150px; 
height: 200px; 
/*background-image: url(uploads/images1.jpg); */
background-position: top; 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
border:3px solid #ccc; 
font:13px normal Arial, Helvetica, sans-serif; 
line-height:20px; 
float:left; 
margin:0 10px 10px 0;
}

.rollover_img a { 
color: #000; 
width: 150px; 
height: 100px; 
display: block; 
text-decoration: none; 
}

.rollover_img a:hover { 
background:#000; 
opacity:.60; 
filter:alpha(opacity=60); 
}

.rollover_img a span { 
display: none; 
width: 150px; 
padding:0px; 
}

.rollover_img a:hover span { 
display: block; 
}

Code (PHP)

<div align="center">
<div class="rollover_img"><a title="<?=$objResult["ProductName"];?>" href="#"><img src="uploads/<?=$objResult["Picture"];?>" border="0">
<span><?=$objResult["ProductName"];?><br>&nbsp;DETAIL&nbsp;|&nbsp;CART&nbsp;</span></a></div> 
</div>

Date : 2012-07-17 10:29:13

By : nottpoo

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : คือจะทำ css แบบเอาเมาส์ชี้ที่รูปแล้วโชว์ detail แทน แต่ว่าทำไม่สำเร็จ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก