ایجاد یک صفحه html

computer_prospect · شهریور 92

با سلام خدمت دوستان

دوستان من جستجو کردم اما به نتیجه نرسیدم که چطور میشه یک صفحه ایجاد کرد مانند توضیح زیر:

من یک عکس دارم و زیر این عکس چند تا دکمه دارم . می خوام در این عکس زمانی که موس روی دکمه ها رفت رنگ دکمه ها تغییر کنه (mouseover) و زوی آنها کلیک کرد به یک صفحه دیگه بره. اگر کسی از دوستان یک نمونه کد رو به من بدن من خودم یاد میگیرم. مشکل من این هست که بر روی این عکس بزرگ چند دکمه وجود داره .

تصویر اول همون عکس یزرگ من هست

تصویر دوم زمانی هست که موس میاد روی دکمه ها

مصطفی صفرعلی · شهریور 92

با سلام

خب اینکه خیلی ساده است . کافیه هر دکمه را بصورت یک تصویر جداگانه در یک دایو قرار بدید و با استفاده از تگ a آن را لینک دهی کنید بعد برای نمایش تصویر دوم در صورت هاور شدن کافیه در داخل تگ هد یک استایل براش تعریف کنید و به تگ a خاصیت hover: رو اضافه کنید و بکگراند دوم رو براش تعریف کنید

موفق و پیروز باشید

یا حق

computer_prospect · شهریور 92

با سلام

خب اینکه خیلی ساده است . کافیه هر دکمه را بصورت یک تصویر جداگانه در یک دایو قرار بدید و با استفاده از تگ a آن را لینک دهی کنید بعد برای نمایش تصویر دوم در صورت هاور شدن کافیه در داخل تگ هد یک استایل براش تعریف کنید و به تگ a خاصیت hover: رو اضافه کنید و بکگراند دوم رو براش تعریف کنید

موفق و پیروز باشید

یا حق

ممنون مصطفی جان . اما این تصویر نمونه بود. ببین مصطفی جان فکر کن تمام تصویر یک از تذهیب استفاده شده پس بین تمام اون دکمه ها تذهیب کار شده. تصویر اول گفتم عکس هست و بین دکمه ها فضای خالی نیست که بشه کلیک کرد داخل عکس هست و تازه تذهیب هم کار شده که در عکس بالا موجود نیست. بعد الان اگر شما دقت کنید تام همه دکمه ها هدیه ما به شما است اما در تصویر اصلی اینجوری نیست و هر کدوم یک نام دارند. خب چطور میشه در یک عکس که روش چندین دکمه کار شده به هر دکمه لینک داد؟ می دونم با خاصیت Map درسته؟ و پس چطور میشه موس اور درست کرد. این روش شما برای زمانی هست (البته فکر می کنم اگر اشتباه می کنم عذر می خوام ) که این دکمه ها جدا باشه از هم. حالا من یک نمونه تصویر دیگر هم قرارمیدم شما ببینید. .

در تصویر اول همانطور که مشاهده می کنید 4 نوشته داریم که اگر با موس روی هرکدوم بریم لینک داره !

تصویر دوم با موس مثلا روی پخش مستقیم حرم رفتیم ، هم تصویر پشت این متن عوض شده هم رنگ متن :

تصویر سوم با موس روی گالری تصاویر رفتیم این هم مانند قبلی تصویر پشت و رنگ عوض شده

همانطور که میبینید هر کدوم که موش روش میاد عوض میشه. چطور باید همچین چیزی بسازم ؟ من کد HTML‌رو می خوام چون در آرتیکل قرار بدم .

ممنون

computer_prospect · شهریور 92

دوستان من از این کد استفاده کردم اما یکم مشکل داره. لطف می کنید یک امتحان بکنید و نتیجه رو اعلام کنید؟

ممنون

<html>
   <head>
       <style>
           .img{
               background:url('images/stories/1.jpg') no-repeat;
               width:500px;
               height:400px;
               position:fixed;
               z-index:1;
           }
           .haram{
               margin-left:50px;
               margin-top:50px;
               width:120px;
               height:40px;
               z-index:-1;
           }
           .haram:hover{
               background-color:yellow;
               opacity:0.2;
               z-index:-1;
               color:red;
           }
       </style>
    </head>
   <body>
       <div class="img">
           <div class="haram"></div>
             <div class="gallery"></div>
             <div class="zendeginame"></div>
             <div class="faraj"></div>
        </div>

    </body>
</html>

مصطفی صفرعلی · شهریور 92

با سلام

میتونی با توجه به سورس کدهای فایلی که نوشتم کدنویسی کنید . محتوای تگ بادی رو میتونید در داخل مطلب استفاده کنی و محتوای تگ استایل رو هم به انتهای یکی از فایلهای css قالبت اضافه کن

برای دیدن دمو هم کافیه فایل html رو روی سیستمت اجرا کنی چون برخی آدرسها مناسب هاست نیست و باید ویرایش کنی

http://www.jmdownload.ir/download.php?filename=13791631051.zip

موفق و پیروز باشید

یا حق

ورود

آخرین ارسال های انجمن جومینا

دانلود جوملای فارسی

دانلود افزونه ها

پیامک متصل به جوملا

کانال تلگرام جومینا

ایجاد یک صفحه html

پست های پیشنهاد شده

computer_prospect 34

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

مصطفی صفرعلی 2,891

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

computer_prospect 34

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

computer_prospect 34

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

مصطفی صفرعلی 2,891

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به گفتگو بپیوندید

فهرست

فعالیت ها