arrow

ظاهر شدن عکس برای کلید های منو

12 پست در این موضوع

سلام و عرض ادب

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

هر کلید عکس مربوط به خودشو داشته باشه...

ممنون میشم اگه کد css یا راه حلی داره آموزش بدید

Share this post


Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش html و css آموزش لاراول آموزش cPanel آموزش php آموزش سئو وردپرس آموزش امنیت وردپرس آموزش وردپرس آموزش فرم ساز RSform آموزش سئو جوملا آموزش فروشگاه ساز Hikashop آموزش فروشگاه ساز ویرچومارت آموزش طراحی سایت آگهی تبلیغاتی آموزش امنیت جوملا آموزش طراحی سایت فروش فایل آموزش طراحی قالب ریسپانسیو با Helix آموزش جوملا 3 آموزش ساخت ربات دکمه ی شیشه ای آموزش ساخت ربات همکاری در فروش آموزش ساخت ربات جذب ممبر آموزش ساخت ربات ضد اسپم آموزش ساخت ربات پیوست فایل سورس ربات مدیر گروه | ربات مدیر گروه همسریابی

سلام و درود

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

برای راهنمایی بهتر دوست عزیز همیشه دمو قرار بدید

Share this post


Link to post
Share on other sites
سلام و درود

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

برای راهنمایی بهتر دوست عزیز همیشه دمو قرار بدید

ممنون از پاسخگویی

متاسفانه این منو روی لوکال هست سایت و اونی که روی هاست هست این منو توش نیست!

البته من این منو رو توی مدیریت منو ها نساختم! منو رو تو html سفارشی ساختم...

چند تا کلید ایجاد کردم و بهشون کد css دادم و لینک کردم به صفحات دیگه!

Share this post


Link to post
Share on other sites

از اساتید کسی میدونه باید چکار کنم؟؟

با خود جوملا که نمیشه درسته؟ css هست یا java؟

Share this post


Link to post
Share on other sites

سلام، نیاز به جاواسکریپت نیست. با css3 هم می تونید. مثل نمونه کد زیر که برای یک منو، عکس را در سمت چپ لینک فراخوانی می کنه، از کد زیر ایده بگیرید و بر اساس کلاس یا آی دی به لینکهای مورد نظرتون اعمال نمایید.

a:hover:after {
   content: url(logo.png);
   display: block;
}
a:hover {
   position: relative;
}
a:hover:after {
   content: url(logo.png); 
   display: block;
   position: absolute;
   right: 120px; 
   top: 50px;
}

Share this post


Link to post
Share on other sites
سلام، نیاز به جاواسکریپت نیست. با css3 هم می تونید. مثل نمونه کد زیر که برای یک منو، عکس را در سمت چپ لینک فراخوانی می کنه، از کد زیر ایده بگیرید و بر اساس کلاس یا آی دی به لینکهای مورد نظرتون اعمال نمایید.

a:hover:after {
   content: url(logo.png);
   display: block;
}
a:hover {
   position: relative;
}
a:hover:after {
   content: url(logo.png); 
   display: block;
   position: absolute;
   right: 120px; 
   top: 50px;
}

با تشکر از شما

این کد هایی که شما گفتید رو نمیدونم چجور باید به کلید ها بدم؟!

این کد Css کلید هست با اسم btn5

.btn5 {
border: 1px solid #E0E0E0;
padding: 0.5em;
border-bottom-color: #CDCDCD;
background: #f9f9f9;
background: -webkit-linear-gradient(top, #f9f9f9, #f7f7f7);
background: -moz-linear-gradient(top, #f9f9f9, #f7f7f7);
background: -o-linear-gradient(top, #f9f9f9, #f7f7f7);
background: linear-gradient(to bottom, #f9f9f9, #f7f7f7);
box-shadow: inset 0px 1px 0 rgba(255,255,255,1);
color: #444;
-webkit-border-radius: 8;
-moz-border-radius: 8;
border-radius: 8px;
}

چطور کد های شما رو بهش بدم؟

اول کد ها Btn5 بنویسم؟ به این شکل؟

.btn5 a:hover:after {
   content: url(images/yootheme/1112.png);
   display: block;
}
.btn5 a:hover {
   position: relative;
}
.btn5 a:hover:after {
   content: url(images/yootheme/1112.png); 
   display: block;
   position: absolute;
   right: 120px; 
   top: 50px;
}

:auau:

Share this post


Link to post
Share on other sites

بصورت زیر اعمال کنید.

.btn5:hover:after {
   content: url(logo.png);
   display: block;
}
.btn5:hover {
   position: relative;
}
.btn5:hover:after {
   content: url(logo.png); 
   display: block;
   position: absolute;
   right: 120px; 
   top: 50px;
}

Share this post


Link to post
Share on other sites
بصورت زیر اعمال کنید.

.btn5:hover:after {
   content: url(logo.png);
   display: block;
}
.btn5:hover {
   position: relative;
}
.btn5:hover:after {
   content: url(logo.png); 
   display: block;
   position: absolute;
   right: 120px; 
   top: 50px;
}

متاسفانه عمل نکرد..

این کل css این کلید...

.btn5 {
border: 1px solid #E0E0E0;
padding: 0.5em;
border-bottom-color: #CDCDCD;
background: #f9f9f9;
background: -webkit-linear-gradient(top, #f9f9f9, #f7f7f7);
background: -moz-linear-gradient(top, #f9f9f9, #f7f7f7);
background: -o-linear-gradient(top, #f9f9f9, #f7f7f7);
background: linear-gradient(to bottom, #f9f9f9, #f7f7f7);
box-shadow: inset 0px 1px 0 rgba(255,255,255,1);
color: #444;
-webkit-border-radius: 8;
-moz-border-radius: 8;
border-radius: 8px;
}

.btn5:hover:after {
   content: url(images/yootheme/1113.png);
   display: block;
}
.btn5:hover {
   position: relative;
}
.btn5:hover:after {
   content: url(images/yootheme/1113.png); 
   /*display: block;*/
   position: absolute;
   right: 120px; 
   top: 50px;
}

این هم کد خود کلید

<a class="btn5" href="#" rel="alternate">btn five</a>

[motat]

Share this post


Link to post
Share on other sites

لطفا آدرس عکسها را چک کنید اگر کد css را به فایل css قالبتان اضافه می کنید پس عکسهای مربوطه را به فولدر images قالبتان انتقال دهید. و آدرس عکسها را مثل زیر اعمال کنید. ببینید درست میشه

.btn5:hover:after {
   content: url(../images/1113.png);
   display: block;
}
.btn5:hover {
   position: relative;
}
.btn5:hover:after {
   content: url(../images/1113.png); 
   /*display: block;*/
   position: absolute;
   right: 120px; 
   top: 50px;
}

Share this post


Link to post
Share on other sites
لطفا آدرس عکسها را چک کنید اگر کد css را به فایل css قالبتان اضافه می کنید پس عکسهای مربوطه را به فولدر images قالبتان انتقال دهید. و آدرس عکسها را مثل زیر اعمال کنید. ببینید درست میشه

.btn5:hover:after {
   content: url(../images/1113.png);
   display: block;
}
.btn5:hover {
   position: relative;
}
.btn5:hover:after {
   content: url(../images/1113.png); 
   /*display: block;*/
   position: absolute;
   right: 120px; 
   top: 50px;
}

نشد.:13:

دیگه مجبورم از جاوا استفتده کنم...

ممنون که وقت گذاشتید:25:

Share this post


Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری