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

[arrow 10]

سلام و عرض ادب

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

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

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

[mahdi_mobasheri 21]

سلام و درود

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

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

[arrow 10]

سلام و درود

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

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

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

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

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

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

[arrow 10]

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

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

[arrow 10]

این هم دموی سایت هست misagh.s2o.ir

[arrow 10]

این هم دموی سایت هست misagh.s2o.ir

:33::33::yoho::yoho::yoho:

[heshmati 10]

سلام، نیاز به جاواسکریپت نیست. با 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;
}

[arrow 10]

سلام، نیاز به جاواسکریپت نیست. با 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:

[heshmati 10]

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

.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;
}

[arrow 10]

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

.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]

[heshmati 10]

لطفا آدرس عکسها را چک کنید اگر کد 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;
}

[arrow 10]

لطفا آدرس عکسها را چک کنید اگر کد 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: