چگونه همچین چیزی تو asp درست کنم که وقتی موس اومد روش تغییر رنگ بده ؟
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
Printable View
چگونه همچین چیزی تو asp درست کنم که وقتی موس اومد روش تغییر رنگ بده ؟
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
سلام
دوست عزیز من این تاپیک رو منتقل میکنم به طراحی استاتیک
شما با استفاده از CSS میتونی این منو ها رو ایجاد کنی. اصلا احتیاجی هم به استفاده از زبان asp نداری. کل اون منو با استفاده از CSS ایجاد شده. شما CSS یاد بگیری خیلی راحت می تونی مثل همون رو درست کنی
رایج ترین روش استفاده از اسکریپت های موسم به RollOver می باشد که کد زیر ساده ترین آنهاست. تنها کافی است عکس مورد نظر خود را یک بار با زمینه خاکستری(pic1.jpg) و بار دیگر با زمینه آبی(pic2.jpg) ذخیره کنید. با رفتن موس روی عکس اول اسکریپت عکس شماره 2 را (با زمینه آبی) جایگزین آن می کند.نقل قول:
[html]
<html>
<head>
<script>
function rollover(a){
if(a==1)
document.images[0].src="pic2.jpg";
if(a==2)
document.images[0].src="pic1.jpg";
}
</script>
</head>
<body>
<img src="pic1.jpg" onmouseover="rollover(1)" onmouseout="rollover(2)">
</body>
</html>
[/html]
روش دوم همان طور که دوستان گفتند استفاده از برگه مد CSS می باشد که نمونه زیر یکی از ساده ترین آنهاست.
[html]
<html>
<head>
<style>
a{
color:#808080;
text-decoration:none;
border:solid;
border-width:1px;
border-color:#666666;
background-color:#CCCCCC;
}
a:hover{
color:blue;
border-color:blue;
}
</style>
</head>
<body>
<a href="www.yahoo.com/">YAHOO!</p>
</body>
</html>
[/html]
و روش سوم استفاده از تکنیک فلش است که نیاز به کار و تبحر در این زمینه دارد
موفق باشید.
:10:
با عرض پوزش کد های تاپیک قبلی مشکلاتی داشتند....:41:
بدین وسیله ویرایش می کنم:
[HTML]
<html>
<head>
<script>
function rollover(a){
if(a==1)
document.images[0].src="pic2.jpg";
if(a==2)
document.images[0].src="pic1.jpg";
}
</script>
</head>
<body>
<img src="pic1.jpg" onmouseover="rollover(1)" onmouseout="rollover(2)">
</body>
</html>
[/HTML]
[HTML]
<html>
<head>
<style>
a{
color:#808080;
text-decoration:none;
border:solid;
border-width:1px;
border-color:#666666;
background-color:#CCCCCC;
}
a:hover{
color:blue;
border-color:blue;
}
</style>
</head>
<body>
<a href="www.yahoo.com/">YAHOO!</p>
</body>
</html>
[/HTML]
:10:
استفاده از جاوا اسکریپت برای منو ها بهترین روش نیست. بد ترین روشه چون لینک های جاوا اسکریپت رو موتور های جستجو نمی تونن ببینن در نتیجه سایت شما index نمیشه و برای همین به موقعیت سایت شما لطمه می خوره
بله دوست عزیز کاملا درست می گویید!:40:نقل قول:
اما منظور من جنبه گرافیکی کار بود نه اندیس گذاری آن توسط موتور های جستجوگر!
در ضمن اگر قسمت HTML کد بالا را اینگونه تنظیم کنیم (دیگر لینک مستقل از جاوا می شود)! و مشکل مورد نظر شما نیز بر طرف می شود!
[HTML]
<a href="www.yahoo.com/"><img ....></a>
[/HTML]
در ضمن فکر کنم در مورد فایل های فلش نیز همین مشکلی که ذکر کردید وجود دارد!
موفق باشید...:11:
برای همین مشکلاتی که برای موتور های جستجو به وجود میاد همیشه پیشنهاد میشه که همیشه لینک های بخش نوار پیمایش سایت رو همیشه با Css ایجاد کنیم. البته اگر هم از جاوا اسکریپت استفاده بشه باید حتما همون لینک ها رو به شکل متنی در زیر صفحه قرار بدن که این ضعف جبران بشه :)
از همه دوستان عزیز که من وراهنمایی کردند سپاس گزارم
کتاب Css هم که تو امضای شما بود رو هم دانلود کردم , برم بخونمش
از همگی ممنون
ببخشید
با Css که اینجا گفتید ممکنه برای عکس هم توضیح بدید
اون کدی که با جاوا هست رو درست کردم اما وقتی روی عکس میرم عکس دوم میاد ولی دیده نمیشه (یه صورت یه مربع که توش ضربدر قرمز داره) و وقتی هم که موس رو از روش کنار میبرم همون مربع ضربدرقرمزی هست و عکس اول دیده نمیشه
کد ها رو هم همونطوری که نوشتید انجام دادم
کلی هم باهاش ور رفتم اما درست نشد
دوست عزیزنقل قول:
دومورد زیر را چک کنید و به بنده نتیجه را خبر دهید:
1- آیا شما عکسهای خود را با نامهای pic1.jpg و pic2.jpg ذخیره کرده اید؟؟؟؟؟؟؟؟؟؟؟
2- آیا عکسهای خود را در همان فولدری ذخیره کرده اید که فایل HTML را ذخیره کرده اید؟؟؟؟؟؟؟؟
موفق باشید.....:11::11::11:
وقتی عکس ها رو نمایش نمیده یا شما مسیر عکس ها رو اشتباه نوشتی یا اینکه اسم عکس ها رو عوض کردی ولی کد صفحه رو اصلاح نکردی. برای درست کردن همون لیست با CSS هم میتونید به این سایت مراجعه کنید.
تو اون آدرس صد ها نمونه منو هست که می تونید از کدوم رو که دوست داشتید انتخاب کنید و ازش استفاده کنید.کد:http://www.cssplay.co.uk/menus/
نقل قول:
بسیار لینک جالبی بود.........
دستتان درد نکند :11::11::11:
اما آقای امیر عباس
یک سوالی داشتم؟؟؟؟؟؟؟؟؟
کد زیر که واسه یکی از منوهای لینک شما هست:
[HTML]
<html>
<head>
<style>
.box {
position:relative;
}
#menu {
width:100px;
text-align:center;
position:relative;
}
#menu a, #menu a:visited {
text-decoration:none;
color:#c00;
display:block;
width:88px;
height:16px;
border:1px solid #fff;
padding:5px;
}
* html #menu a,
* html #menu a:visited {
width:100px;
height:28px;
w\idth:88px;
he\ight:16px;
}
#menu a span {
display:none;
}
#menu a:hover {
border:1px solid #c00;
}
#menu a:hover span.left,
#menu a:hover span.right {
display:block;
position:absolute;
height:0;
width:0;
overflow:hidden;
border-top:8px solid #fff;
border-bottom:8px solid #fff;
}
#menu a:hover span.left {
left:5px;
top:5px;
border-left:8px solid #c00;
}
#menu a:hover span.right {
left:87px;
top:5px;
border-right:8px solid #c00;
}
* html #menu a:hover span.left,
* html #menu a:hover span.right {
width:8px;
height:16px;
w\idth:0;
he\ight:0;
}
</style>
</head>
<body>
<div id="menu">
<div class="box">
<a href="#nogo">Item 1
<span class="left"></span>
<span class="right"></span>
</a>
</div>
<div class="box">
<a href="#nogo">Item 2
<span class="left"></span>
<span class="right"></span>
</a>
</div>
<div class="box">
<a href="#nogo">Item 3
<span class="left"></span>
<span class="right"></span>
</a>
</div>
<div class="box">
<a href="#nogo">Item 4
<span class="left"></span>
<span class="right"></span>
</a>
</div>
<div class="box">
<a href="#nogo">Item 5
<span class="left"></span>
<span class="right"></span>
</a>
</div>
</div>
</body>
</html>
[/HTML]
علی رغم بزرگی تنها یک border اطراف متن ایجاد می کند...
در حالی که در مثال خود سایت مثلث های کوچکی در لینک hover دیده می شود......
به نظر می رسد از عکس زمینه استفاده شده اما در سورس چیزی مشاهده نمی شود...!!!!!!:41::41::41:
و همچنین یک کد دیگر مربوط به یک منو به حالت شش ضلعی(کندوی عسل) بود . در مورد چگونگی طراحی آن هم اگر می شود توضیح دهید..........
ممنون می شوم.................:40::40::40::40::40::40::40 :
اگر میشه لینک اون لیست مورد نظر رو بدید من توضیح بدم
این هم لینک کد:
[HTML]
http://www.cssplay.co.uk/menus/hexagon.html
[/HTML]
:40:
طراحی اون منو هم که به شکل کندوی عسله به طور کامل با CSS انجام شده و از خصوصیت border استفاده شده. در کل از عکس به هیچ عنوان استفاده نشده. توضیحش خیلی زمان میبره. یه چیزی شبیه به اون توی اون کتابی که توی امضام هست (البته نسخه کاملش) در مورد ایجاد گوشه های گرد برای صفحه هست که بدون استفاده از عکس و فقط با کمک CSS ایجاد میشه
نقل قول:
اما فکر کنم بدون استفاده از عکس نشه!!!!:18::18::18:
اگه ممکنه حداقل یک کد نمونه بذارید تا خودم بخونم....
مرسی....:11::11::11:
نوید جان کد Css و Html اون نمونه کندو تو خود صفحه هست. Css چیز خاصی نداره که بشه از دید کاربر مخفیش کرد. شما همون صفحه رو ذخیره کن و فایل Css و Html اون رو آنالایز کن :)