ต่อไป »

[004275]

คือพอจะมีวิธีให้เวลานำเมาส์ไปชี้ แล้วทำการลิงค์ไปยัง url ของ header โดยใช้ css ไหมคับ

ที่ทำอยู่ มันต้องเอามาไว้ที่ index.html และทุกหน้าอะคับ แบบนี้

โค๊ด:

<img src="http://www.xxx.com/cat/a.jpg" alt="xxx.com" width="950" height="152" border="0" usemap="#Map" longdesc="http://www.xxx.com/" />
<map name="Map" id="Map"><area shape="rect" coords="47,18,303,121" href="http://www.xxx.com/" /></map>

แต่จะทาง ให้มันไปอยู่ในไฟล์ style.css เลยได้ไหมอะคับ

อันนี้เป็นส่วน css header น่ะคับ

โค๊ด:

#div-header {
height:152px;
position:relative;
width: 950px;
margin-left: 25px;
} 

ขอบคุณมากคับ

[ปิง^^]

ส่วนตัวผม ผมคิดว่า ถึงใส่โคด้ใน css ไปแล้วก็ต้องมา ระบุ class อยู่ดี งั้นถ้าแบบลูกทุ่งแบบผมก็แนะนำวิธีนี้ครับ
สร้างไฟล์ head.php ขึ้นอีกหนึ้งไฟล์ แล้วหน้าที่ต้องการดึงไฟล์นี้ไปก็ค่อย ใช้คำสั่ง เรียกมา เผื่อเวลาแก้จะได้ไปแก้แค่หน้าเดียวครับ
ผิดถูกยังไง รอเซียนเข้ามาช่วยอีกทีคับ

[ttong]

งงๆ กับคำถามอ่าา

ขยายความอีกหน่อยดีมั้ยครับ

[004275]

คือในไฟล์ style.css จะมี ตแหน่ง header อยู่แล้วอะคับ แต่ถ้าใส่ใน style.css มันก็จะเป็นแบนเนอร์อย่างเดียว เวลานำเมาส์ไปชี้ ก็จะไม่มีลิงค์อะไรเกิดขึ้นน่ะคับ

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

[alert]

อ่านแล้ว งงๆ กับคำถามครับ น่าจะอธิบายให้เคลียร์กว่านี้นะครับ ว่า header อะไร , เอาไรไปไว้ใน  index.html ทุกไฟล์ , มีลิงค์ยังไง ต้องการ ให้ css ควบคุม <img> รึเปล่าครับ รึว่าหมายถึง link ที่กดแล้วเปลี่ยนไปหน้าอื่นๆ 

 ที่ผมเข้าใจนะ ไม่ต้องใช้ css ป่ะ  แค่ใส่ <a> ก็ได้แล้วมั้งครับ

โค๊ด:

<a href="url"><img src = "zzz".../><map ... ></map></a>

หรืออีกวิธีก็ใช้ javascript ครับ   onclick= "window.location='url' ;"

[EThaiZone]

โค๊ด:

คือพอจะมีวิธีให้เวลานำเมาส์ไปชี้ แล้วทำการลิงค์ไปยัง url ของ header โดยใช้ css ไหมคับ

เขียนเป็น component เรียกผ่าน behavior ใน css
แต่ลงท้าย มันก็ต้องเขียนเป็น JS ยัดไส้อยู่ดี
สรุป ขี่ช้างจับตั๊กแตน

จากที่อ่านมา ทำเป็น php แล้ว include เอาไม่ได้เหรอ 

[004275]

โค๊ด:

คือพอจะมีวิธีให้เวลานำเมาส์ไปชี้ แล้วทำการลิงค์ไปยัง url ของ header โดยใช้ css ไหมคับ

เขียนเป็น component เรียกผ่าน behavior ใน css
แต่ลงท้าย มันก็ต้องเขียนเป็น JS ยัดไส้อยู่ดี
สรุป ขี่ช้างจับตั๊กแตน

จากที่อ่านมา ทำเป็น php แล้ว include เอาไม่ได้เหรอ 

ทำไม่เป็นอะคับ

คือตอนนี้ที่มำจะเป็น <img src="http://xxx.com/themes/aaa.jpg "> แล้วสร้าง map ขึ้นมานะคับ

ไม่ทราบว่าทำเป็น css จะยากไหมอะคับ

[EThaiZone]

ไม่มีทางที่จะทำ html เป็น css
หรือการเขียน css เพื่อสร้าง html

พวกนี้ทำไม่ได้เลยครับ

ที่มาจัดการได้ จะเป็น javascript แต่ในด้าน SEO
เป็นอะไรที่ควรเลี่ยงสุดโต้ง (Google มันอ่านไม่เป็น)

เห็นท่านถามคำถาม php มาครั้งสองครั้ง ผมก็นึกว่าท่านเป็น php แล้ว 

แต่ถ้ายังไม่รู้กระทั่งเรื่องการ include บน php
ขอแนะนำให้ซื้อหนังสือ php มาศึกษาเลยครับ
มันไม่ยากเลย เห็นท่านใช้ map area นี้
แปลว่าท่านน่าจะแม่นเรื่อง html แล้ว

ถึงเวลาจะอัพเกรดสกิลตัวเองแล้วครับ
แนะนำให้ศึกษาเรื่อง php เพิ่มเลยครับ

ถ้าใช้ php ช่วยในเรื่องการเขียนเว็บ
ท่านจะเลิกการเขียน html เพรียวๆ ไปเลย

 :

[mefong]

  อยากช่วยแต่ งง กะคำถาม ~~!

ไม่รู้จะตอบยังไงเลย

[g-ji]

งงๆ  

คือจะทำลิ้งค์บนรูปหรอ

เท่าที่เห็นจากโค้ดคือ ใช้ รูปใหญ่ๆ แล้วกำหนด ตำแหน่งที่จะทำลิ้งค์ไว้ด้วย Map

แล้วทำไมไม่ทำเป็น 2 รูป หว่า

รูปนึงเป็น แบคกราว

อีกรูปนึงเป็นชื่อเว็บ

คล้ายๆ แบบนี้

โค๊ด:

http://maynarakmak.g-ji.com/

มีแบคกราว รูปนึง ชื่อเว็บรูปนึง รูปอยู่ใน H1 ด้วย (และใน h1 ก็มีข้อความ เดียวกับบนรูป CSS magic ไม่ใช่หมวกเทานะ)

ทีนี้ถ้าจะทำลิ้งค์ก็แค่ กำหนด ตำแหน่งของ รูปชื่อเว็บ อย่างเดียว ด้วย absolute (โค้ด CSS header ทำ relative ไว้แล้วนี่)

เราเข้าใจถูกมั้ยหว่า

[g-ji]

คือที่พี่บอกมา นี่ทำไงอะคับ เข้าใจว่า มี 2 รูป รูปนึง bg รูปหนึ่งเป็นตัวอักษร ถูกปะคับ

แล้วทีนี้จะเขียนใน style.css อย่างไรบ้างอะคับ

ขอบคุณมากคับ

 

PM มาถามว่า ทำยังไง

ok มันไม่ใช่ความลับอะไรอยู่ละ

เตรียมรูปก่อน 2 รูป
1. รูป BG (ก็รูปที่ใช้่นั้นแหละ แต่ ตัดตัวข้อความที่จะทำลิ้งค์ไปเว็บออกมา)
2. รูป สำหรับทำ ลิ้งค์ ไปเว็บ...

เริ่มที่ html ก่อน

โค๊ด:

<div id="header">
		<h1><a href="url/to/web" title="Web description / web title"><img src="path to/images/Mayhead.gif" alt="image alt" /></a>ข้อความที่เหมือนกับในรูป ก็คือ ชื่อเว็บ นั้นแหละนะ</h1>
		<h2>อันนี้คำอธิบายเว็บจะมี หรือ ไม่มีก็ได้ ถ้าไม่มีการเปลี่ยนแปลงคำอธิบายเว็บ ก็ทำเป็นรูป แล้วแก้ CSS นิดหน่อยก็ได้เหมือนกัน</h2>
</div>

ไม่จำเป็นต้องใ้ช้ H1 / H2  ก็ได้นะ (แต่ที่ใช้นี่คือ SEO ล้วนๆ  )

มาทาง CSS บ้าง

โค๊ด:

#header{
margin:0 auto;padding:0;
width:100%;
height:360px;/*ขนาดเท่ากับ ขนาดรูปพอดี หรือ ใหญ่กว่าได้นิดหน่อย*/
background-image:url(images/header.jpg);
background-position:top center;/*ตำแหน่งของรูป*/
background-repeat:no-repeat;/*แสดงผลไม่ซ้ำ*/
position:relative;/*สำคัญมากเพื่อกำหนดตำแหน่งของ img ที่เราทำลิ้งค์*/
}

#header h1{
font:bold 3.5em Tahoma;letter-spacing:-1px;
margin:0 1%;padding:1%;
text-align:center;
visibility:hidden;/*ซ้อนข้อความใน H1 ให้คนมองไม่เห็น แต่บอทมองเห็น ไม่ใช่หมวกเทานะ เพราะไม่ได้ spam keyword ถ้าไม่มีรูป ข้อความใน alt ของรูป จะมีขนาดเท่ากับที่ตั้งไว้ด้วยนะ*/
}

#header h1 a img{
visibility:visible;/*ปิดข้อความด้วยคำสั่งข้างบน แต่ ตัวนี้สั่งให้แสดงผลก็จะมีแต่รูป*/
position:absolute; /*สำคัญมาก*/

/*ตำแหน่งของรูป ที่ทำเป็นลิ้งค์ ไปลองกำหนดเอาเอง*/
top:35%; 
right:50%; 
bottom:50%;
left:37%;
}

#header h2{
font:normal 2.5em Tahoma;
margin:0 1%;padding:0;
text-align:center;
visibility:hidden; /*อันนี้สั่งให้ซ่อนข้อความ ถ้าจะใช้รูปแทนคำอธิบายเว็บก็ copy โค้ด ข้างบนมา แล้วเปลี่ยน h1 >> h2*/
}

เปลี่ยน h1/h2 เป็น html tag ที่ต้องการได้ แล้วแต่จะใช้

ถ้าจะทำหลายลิ้งค์ แบบติดๆ กันก็ ใช้ ul li ก็ได้ (กำหนดยากหน่อยแต่ก็เจ๋งดี ถ้าทำได้นะ)

ศึกษา CSS เพิ่มเติมที่ w3schools.com