The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Mousehover image in description

View previous topic View next topic Go down

Solved Mousehover image in description

Post by Klonoa on February 22nd 2012, 11:22 pm

How can i make something like this:
http://pokemoncentral.forumcommunity.net/
When your mouse goes to the image it shows clearly and forum link is pointed?

sincerely
Klonoa


Last edited by Klonoa on February 25th 2012, 12:08 pm; edited 1 time in total

Klonoa
Forumember

Male Posts : 161
Reputation : 5
Language : English, Serbian
Location : Repulika Srpska

http://pokemonworldrpg.pokemonlegend.org/

Back to top Go down

Solved Re: Mousehover image in description

Post by Klonoa on February 23rd 2012, 1:05 pm

anyone? :/

Klonoa
Forumember

Male Posts : 161
Reputation : 5
Language : English, Serbian
Location : Repulika Srpska

http://pokemonworldrpg.pokemonlegend.org/

Back to top Go down

Solved Re: Mousehover image in description

Post by aRt)Y on February 23rd 2012, 1:27 pm

I can only help you with an image as link but not with the link "poping up".
example:
Code:
<a href="www.google.de"><img src="http://www.blog.webtec-braun.com/wp-content/uploads/google.jpg" alt="www.google.de"/></a>

aRt)Y
Forumember

Male Posts : 97
Reputation : 6
Language : German
Location : Germany

Back to top Go down

Solved Re: Mousehover image in description

Post by Nera. on February 23rd 2012, 2:32 pm

Ćao Kolonoa,

You can do it like this (I'm assuming you have a phpBB2 version if I remember correctly).

You'll go to your AP > Display > Templates > Index_box template and find this:

Code:
            <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">

You will replace it with this:

Code:
         <td class="hover row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">

Than you'll add this to CSS:

Code:
.hover:hover a{
    text-decoration: underline !important;
}
.hover:hover img {
    opacity: 0.3;
}

Touch your avatar here on the last subforum to see was that what you wanted.

http://someonelikeyou.forumcroatian.com/

Ofcourse you can customise it as you wish.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Mousehover image in description

Post by Klonoa on February 23rd 2012, 4:41 pm

Cao Nera, I see you are doing fine Very Happy

It works perfectly, but you countered it x] I need it to be full opacity when you mouseover it and lowed when its in normal stage. Smile

Klonoa
Forumember

Male Posts : 161
Reputation : 5
Language : English, Serbian
Location : Repulika Srpska

http://pokemonworldrpg.pokemonlegend.org/

Back to top Go down

Solved Re: Mousehover image in description

Post by Klonoa on February 24th 2012, 9:32 am

bump :-)

Klonoa
Forumember

Male Posts : 161
Reputation : 5
Language : English, Serbian
Location : Repulika Srpska

http://pokemonworldrpg.pokemonlegend.org/

Back to top Go down

Solved Re: Mousehover image in description

Post by Jophy on February 24th 2012, 11:38 am

Please don't double/triple post.

Your post need to be separated by 24 hours before bumping, replying or adding more information. Please use the EDIT button instead. This is your 2nd reminder about this.

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

Solved Re: Mousehover image in description

Post by kirk on February 24th 2012, 11:51 am

@Klonoa wrote:

I need it to be full opacity when you mouseover it and lowed when its in normal stage. Smile


i am not 100% sure what you mean, but you can change the opacity ratio here in the css

opacity: 0.3;

you will just have to fiddle with until you get what you like, start with 0.9 and work your way down. may be 0.7 or 0.5 will do the trick.. if thats what you mean, if not nera will help you get it sorted Smile

info added
Oh wait you must have changed it already, because your looks way different then neras example on the avatar??

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Solved Re: Mousehover image in description

Post by Nera. on February 24th 2012, 11:57 am

Kirk, that's not his forum, that's just an example Very Happy I'll reverse it and edit the post. Sorry for the mistake Very Happy

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Mousehover image in description

Post by kirk on February 24th 2012, 12:01 pm

@Nera. wrote:Kirk, that's not his forum, that's just an example Very Happy I'll reverse it and edit the post. Sorry for the mistake Very Happy

haha your confusing me, the Pokemon forum is his right, and the avatar example is your test forum?

whatever the case you got it gal .. Very good HEHE

Nice job luv luv luv

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Solved Re: Mousehover image in description

Post by Klonoa on February 24th 2012, 2:15 pm

ok thanks Nera Very Happy Let me know when you edit it Wink
Oh and thank you guys for trying to help, i appreciate it Smile

Klonoa
Forumember

Male Posts : 161
Reputation : 5
Language : English, Serbian
Location : Repulika Srpska

http://pokemonworldrpg.pokemonlegend.org/

Back to top Go down

Solved Re: Mousehover image in description

Post by MrMario on February 25th 2012, 2:55 am

Hello,

All solved?

MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1830
Language : test

http://test.com

Back to top Go down

Solved Re: Mousehover image in description

Post by Nera. on February 25th 2012, 8:19 am

No Mario, I'm late. Embarassed

No Kirk, that's just an example forum of what he wants Very Happy

Klonoa, leave the first CSS part and delete this one:

Code:
.hover:hover img {
    opacity: 0.3;
}

And then add this to CSS:

Code:
.hover img:hover {
    opacity: 1;
}
.hover img {
    opacity: 0.3;
}

Example: http://someonelikeyou.forumcroatian.com/

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Mousehover image in description

Post by advantage on February 25th 2012, 8:56 am

nice and bumper

advantage
Forumember

Male Posts : 125
Reputation : 1
Language : english
Location : westbengal,india

http://gsmforum.online-talk.net

Back to top Go down

Solved Re: Mousehover image in description

Post by Klonoa on February 25th 2012, 12:07 pm

Thanks Nera you're the greatest Very Happy Hvala puno Smile

Solved

Klonoa
Forumember

Male Posts : 161
Reputation : 5
Language : English, Serbian
Location : Repulika Srpska

http://pokemonworldrpg.pokemonlegend.org/

Back to top Go down

Solved Re: Mousehover image in description

Post by Nera. on February 25th 2012, 12:27 pm

Topic Solved & Locked

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum