• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
تغییر استایل عکس با حرکت موس روی لینک
#1
بازم سلام.
اینکه وقتی با موس روی لینکی میریم و اون لینک تغییر رنگ میده رو میدونم . ولی اگه بخوایم با رفتن موس روی یک لینک ، یک عکس دیگه مثلا تغییر رنگ بده ( یا هر تغییر دیگه ای ) نمیدونم.
چطور تغییر لینک روی تغییر عکس میتونه تاثیر بزاره.باور کنید جستجو کردم ، فارسی ، انگلیسی ... اما نبود..
اگر یک نمونه کد بزارید خیلی لطف کردید .
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#2
شما میای برای یه عکس، div و یا span دیگه است یه id میزاری
بعد میای یه تابع جاوا اسکریپت برای تغییر استایل مینویسی و تو رویداد mouseOver اون لینکی که میخوای با رفتن موس روش اون یکی div تغییر رنگ بده، فانکشن رو لود میکنید...

کد:
<span id="Span1"  style="border:1px gray solid; background:yellow;" >Over Mouse Here...</span>
<div id="Div1" style="position:relative;background:red;width:100px;height:100px;" ondblclick="alert('ac');"></div>

<script language="javascript" type="text/javascript">
        
    document.getElementById("Span1").onmouseover = function (){document.getElementById("Div1").style.background="green"; };    
</script>

و یا بصورت مبتدی تر:

کد:
<script language="javascript" type="text/javascript">
        
    function changeBG()
    {
        document.getElementById("Div1").style.background="green";
    }
</script>



<span style="border:1px gray solid; background:yellow;" onmouseover="changeBG()" >Over Mouse Here...</span>
<div id="Div1" style="position:relative;background:red;width:100px;height:100px;" ondblclick="alert('ac');"></div>
هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
  پاسخ
تشکر شده توسط : pary_daryayi Reza
#3
خیلی ممنون که وقت گذاشتین . من هم احساس کردم که این نیاز به کد جاوااسکریپت داره ، اما مسئله اینه که اینو یه دانشجوی کاردانی از من پرسید و گفت تمرین استادمه.استادشون هم فقط html و css درس داده و حالا اینو با css خواسته ... یعنی میشه بدون جاوااسکریپت ؟ یا داره آزارشون میده ؟؟( البته فعلا که من دارم آزار میبینم)
بازم ممنون . حتما یه روزی این کدتون رو تو جایی از پروِژه ی خودم استفاده کنم.لطف کردین . پس به نظر شما با css تنها نمیشه . درسته ؟
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#4
اومممم، علیرضا کجایی؟ Wink

باید صبر کنید تا علیرضا بیاد، اگر بشه کار خودِ خودشه...
هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
  پاسخ
تشکر شده توسط : Reza
#5
از اینا میگی؟ Big Grin

کد پی‌اچ‌پی:
<!DOCTYPE html>
<
html>
    <
head>
        <
title>MasoudManson</title>
        <
style>
            
#div1, #div2{
                
width100px;
                
height100px;
                
background-color#ffff00;
                
bordersolid 4px #777777;
                
positionabsolute;
                
top40%;
            }
            
#div1{
                
left20%;
                
text-aligncenter;
                
font-size32px;
                
font-familytahoma;
            }
            
#div2{
                
right20%;
            }
            
#div1:hover ~ #div2{
                
background-color#ff0000;
            
}
        </
style>
    </
head>
    <
body>
        <
div id="div1">Bia Ru Man :)</div>
        <
div id="div2"></div>
    </
body>
</
html
W H A T E V E R   Sleepy 
  پاسخ
تشکر شده توسط : hamid_80386 cyletech Reza pary_daryayi vejmad
#6
فرقی نمیکنه...چه لینک باشه چه عکس با CSS‌میشه اینکارو انجام داد.... کافیه hover اش رو که تنظیم میکنین اون عکسی که میخواین رو بذارین...
ببینین...معمولا دو یا سه تا عکس با رنگ های مختلف مثلا برای یک دکمه درنظر میگیرن...اونایی که قراره عکس باشه ها البته...
در حالت عادی که یکی از اون عکس ها عکس مربوط به دکمه است.وقتی اون عکس لینک باشه شما میتونین توی Hoverاش تعریف کنین که چه عکسی لود بشه...به همین سادگی به همین خوشمزگی
بنده طعم ايمان را نمي چشد، تا اينكه دريابد آنچه اتفاق نيفتاده است نمي شد كه اتفاق بيفتد؛و آنچه شده و اتفاق افتاده است,نمي شد كه نشود و اتفاق نيفتد....حضرت علي(ع)
  پاسخ
تشکر شده توسط : hamid_80386 Reza
#7
نه بابا، مثل اینکه فقط علیرضا نیست، همه بچه ها استادن، یعنی پرچم این فروم بالاساااااااا

چقدر خوبه آدم این سکلتور ها رو بلد باشه... Rolleyes

یه لیست کاملش اینجا هست:

CSS Selectors
هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
  پاسخ
تشکر شده توسط : masoudmanson Reza
#8
دقیقا همون که مسعود گفت. یه چیزی رو بذار براتون روشن کنم. css داره به سمتی میره که شما دیگه نیازی به انجام هیچگونه کاری که مرتبط با استایل و طرح صفحه و زیبایی صفحه باشه و با جاوا اسکریپت انجام بشه نداشته باشید. الآن تقریبا نیمی از نیاز ما رو css تأمین میکنه. فکر استفاده از جاوا اسکریپت رو واسه چنین کارها از سرتون بیرون کنید.
غایب
  پاسخ
تشکر شده توسط : masoudmanson hamid_80386 Reza vejmad
#9
به حمید بگو یه دونه فلفل سبز بده میره پیاز رنده شده میده .
آخه حمید یه نیگا به کد مسعود بنداز!
خداییش خوشکل نیست ؟Blush
بابا کم برو تو فاز جاوااسکریپت Tongue
وبلاگ rezaonline.net/blog
سفارش برنامه نویسی reza.biz
Php , mysql , postgresql , redis , Yii and ... Cool
  پاسخ
تشکر شده توسط : masoudmanson hamid_80386
#10
یادته یه دفعه Limit تو sql رو یادم رفته بود؟!!! Wink Big Grin
هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
  پاسخ
تشکر شده توسط : Reza


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان