XOOPS 
Forum
Forum Index General Forums Community Support Modules Support Themes Support Development International Support Module Hack Reviews Theme Designer Talk
  1. Board index / 
  2. XOOPS Themes and Templates Support forums / 
  3. Theme design questions 
  4.  / Modding images to be rollover sensitive?
Register
1
IndigoAK
Modding images to be rollover sensitive?

  • 2005/2/4 1:20

  • IndigoAK

  • Just popping in

  • Posts: 17

  • Since: 2005/1/26


Okay, the theme I'm working with can be seen on my site:

http://sting.vonnoodle.com

So, the buttons in the top right corner...I want them to turn full-color when hovered over...how would I go about doing that? I know how to edit the code to use PNG images to get the desired bit-depth, but I don't know how to actually code it. I tried viewing the source for a DW and FP site that used it but it was done with their respective Extensions...:(

Any help would be appreciated...

<td><a href="<{$xoops_url}>/"><img name="home" src="<{$xoops_imageurl}>images/home.gif" alt="A-D Main Page"></a></td>
                       
                      <td><a href="http://sting.vonnoodle.com/modules/debaser/genre.php?genreid=2"><img name="help" src="<{$xoops_imageurl}>images/music.GIF" alt="My Music"></a></td>
                       
                      <td><a href="http://sting.vonnoodle.com/modules/popnupblog/"><img name="contact" src="<{$xoops_imageurl}>images/book.GIF" alt="My Book"></a></td>


That's what needs to be modified I think...

Thanks for any help!
2
WarDick
Re: Modding images to be rollover sensitive?

  • 2005/2/4 3:04

  • WarDick

  • Just can't stay away

  • Posts: 890

  • Since: 2003/9/13


Hi IndigoAK,

I like the look of you theme. Try taking a look a some of StudioC's work. He has released some themes lately that feature rollovers. They can be found by searching the forum here.
3
tjnemez
Re: Modding images to be rollover sensitive?

  • 2005/2/4 4:28

  • tjnemez

  • Home away from home

  • Posts: 1594

  • Since: 2003/9/21


a simple example, but you will get the idea.

<div class="rollover">
<p>
<a href="#"><img src="yourtransparent.gif" width="50" height="50" border="0"></a>
</p>
</div>

.rollover a { display:block; width:50px; background-color: #FFFFFF}
.rollover a:hover { background-color: #990000}

using a transparent gif (size accordingly), something simple like the above will change the background color. you can also use this in table.
4
IndigoAK
Re: Modding images to be rollover sensitive?

  • 2005/2/4 4:33

  • IndigoAK

  • Just popping in

  • Posts: 17

  • Since: 2005/1/26


You've lost me....where do I put it?

This is like teaching a monkey to drive a Ferari...I'm clueless...this theme wasn't built by me, I just want the little icons to change bit-depth when they are hovered over.

Honestly...I need like step by step instructions, or I'll never remember it...I'm sort of mentally disabled...
5
tjnemez
Re: Modding images to be rollover sensitive?

  • 2005/2/4 4:59

  • tjnemez

  • Home away from home

  • Posts: 1594

  • Since: 2003/9/21


think i lost myself. do not know if this will work, but worth a try

add this to your style.css

.rollover a {
background-color: #FFFFFF /*change to your background color */
}
.rollover a:hover { background-color: #990000}



<td><a class="rollover" href="<{$xoops_url}>/"><img name="home" src="<{$xoops_imageurl}>images/home.gif" alt="A-D Main Page"></a></td>

<td><a class="rollover" href="http://sting.vonnoodle.com/modules/debaser/genre.php?genreid=2"><img name="help" src="<{$xoops_imageurl}>images/music.GIF" alt="My Music"></a></td>

<td><a class="rollover" href="http://sting.vonnoodle.com/modules/popnupblog/"><img name="contact" src="<{$xoops_imageurl}>images/book.GIF" alt="My Book"></a></td>

this is shooting from the hip, i have not tested this. if you want to have the rollover effect change the gif you would have to do something like this i think:

.rollover a {
background-image:url(your_home.gif);
}
.rollover a:hover {
background-image:url(your_rollover.gif);
}

.rollover1 a {
background-image:url(your.gif);
}
.rollover1 a:hover {
background-image:url(your_rollover.gif);
}

maybe someone else will weigh in on this thread.
6
IndigoAK
Re: Modding images to be rollover sensitive?

  • 2005/2/4 5:08

  • IndigoAK

  • Just popping in

  • Posts: 17

  • Since: 2005/1/26


Hmmm...I honestly don't know where to put it...my CSS file doesn't look like the one that XOOPS comes with out of the box.

Wait...I think I do now...those images are part of the theme itself...so they would go with the theme's part of the CSS and not the XOOPS part...I think.

Oh well, might as well try it.

It didn't work, but I could very well be doing something wrong...I'm very terrible at these things.

I put the first bit of code at the end of my CSS file with the rest of the theme's personal data.

Do I put the other stuff in the theme.html file or do I put that at the end of the CSS file also?
7
tjnemez
Re: Modding images to be rollover sensitive?

  • 2005/2/4 5:29

  • tjnemez

  • Home away from home

  • Posts: 1594

  • Since: 2003/9/21


html should be

<td class="rollover"><a href="<{$xoops_url}>/"><img name="home" src="<{$xoops_imageurl}>images/home.gif" alt="A-D Main Page"></a></td>

<td class="rollover"><a href="http://sting.vonnoodle.com/modules/debaser/genre.php?genreid=2"><img name="help" src="<{$xoops_imageurl}>images/music.GIF" alt="My Music"></a></td>

<td class="rollover"><a href="http://sting.vonnoodle.com/modules/popnupblog/"><img name="contact" src="<{$xoops_imageurl}>images/book.GIF" alt="My Book"></a></td>

add this to style.css

.rollover a {
background-color: #FFFFFF /*change to your background color */
}
.rollover a:hover { background-color: #990000}

see example here(at bottom of page): www.webdezines.ca/xoops
8
IndigoAK
Re: Modding images to be rollover sensitive?

  • 2005/2/4 5:40

  • IndigoAK

  • Just popping in

  • Posts: 17

  • Since: 2005/1/26


Okay...I replaced the HTML code with the one you gave me and then added that to the CSS file, but all it did was change the colors back to 256-color...they don't change when I hover.
9
tjnemez
Re: Modding images to be rollover sensitive?

  • 2005/2/4 5:44

  • tjnemez

  • Home away from home

  • Posts: 1594

  • Since: 2003/9/21


read my last post and see test.
10
IndigoAK
Re: Modding images to be rollover sensitive?

  • 2005/2/4 5:47

  • IndigoAK

  • Just popping in

  • Posts: 17

  • Since: 2005/1/26


No...mine just stay the same...no color change, no background change...they just stay static.

Anyways...it's all cool, I can live without it. It's not the end of the world, I just thought it would be a cool trick to show my friends.

Thanks for the help though.

Login

Register now!  |  Lost Password?

Search

Advanced Search

Recent Posts

Who's Online

186 user(s) are online (157 user(s) are browsing Support Forums)

Members: 0

Guests: 186

more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: May 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits