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.

Hovering above words.

View previous topic View next topic Go down

In progress Hovering above words.

Post by jo3ri132 on November 8th 2013, 9:11 pm

Hi all,

I was wondering if its possible to let images be shown when hovering about some words. I know its possible to make the forum make some words change when you write them so is it also possible to apply a picture above some words?

I hope you guys can help!

jo3ri132
Forumember

Posts : 35
Reputation : 1
Language : Nederlands

Back to top Go down

In progress Re: Hovering above words.

Post by erchima on November 8th 2013, 10:40 pm

image example, may be i can help u

erchima
Forumember

Female Posts : 629
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

In progress Re: Hovering above words.

Post by levy on November 8th 2013, 11:19 pm

It is very easy , so for example :

Firs we need a div , so let's start with one simple
Code:
<div class="foho">Your</div> special words goes there
Now , we need to style little bit :

Code:
.foho:before:hover{
content:url(My Image);
}
And that's all Very Happy

levy
Hyperactive

Male Posts : 2582
Reputation : 345
Language : Romanian, English
Location : criticize artwork, not people!

http://help.forumotion.com/

Back to top Go down

In progress Re: Hovering above words.

Post by Ange Tuteur on November 9th 2013, 3:54 am

Hello jo3ri132,

I did a few tests for adding classes to specific words and came up with this example:


Basically we use a script to add a class to specific words; like above 'test1'. Afterwards we can add some styles to be applied to that class ex: the FA twitter image.

This is the script: (Should modify only topic content of phpbb2 with the word "test1")
Name it what you wish
It should only be applied in the topics.
Code:
$(".postbody > div").each(function() {
$(this).html($(this).html().replace(/test1/ig,'<span class="word-highlight">Test1</span>'));
});
You should edit this part with the words you wish to modify:
Code:
.replace(/test1/ig,'<span class="word-highlight">Test1</span>')
This is the content to replace:

/test1/ig
We're searching for 'test1' that is where you'll place your word you want modified. To the right of that is our modifiers. We're using the following:

i: case-insensitive matching
g: global match (finds all matches)

After the comma is our content which replaces that word:
Code:
'<span class="word-highlight">Test1</span>'
Simply add your word between the tags, most commonly it is the same as the content replaced only we're wrapping tags with a class around it.

Last, but not least we just have to write up our CSS:
Code:
.word-highlight{
position:relative;
background-color:#ff0;
}
.word-highlight:hover:after{
box-shadow:2.5px 2.5px 1.5px rgba(0,0,0, 0.5), 3px 3px 6px rgba(255,255,255, 0.5) inset;
background-color:#999;
border:1px solid #999;
display:inline-block;
border-radius:5px;
position:absolute;
bottom:-65px;
right:-65px;
padding:3px;
z-index:1;
content:url('http://illiweb.com/fa/optimisation_fdf/fr/twitter10.png');
}
You can modify all of the above to your liking, but to change the image simply edit this part:
Code:
content:url('http://illiweb.com/fa/optimisation_fdf/fr/twitter10.png');
You can also use candy_fears example if it is only for one single post. However, a span tag should be used so the words remain inline. As for the CSS all is well, but :hover should be before :before. Wink

If you have any questions let us know.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hovering above words.

Post by jo3ri132 on November 9th 2013, 3:42 pm

SethC1995 wrote:Hello jo3ri132,

I did a few tests for adding classes to specific words and came up with this example:


Basically we use a script to add a class to specific words; like above 'test1'. Afterwards we can add some styles to be applied to that class ex: the FA twitter image.

This is the script: (Should modify only topic content of phpbb2 with the word "test1")
Name it what you wish
It should only be applied in the topics.
Code:
$(".postbody > div").each(function() {
$(this).html($(this).html().replace(/test1/ig,'<span class="word-highlight">Test1</span>'));
});
You should edit this part with the words you wish to modify:
Code:
.replace(/test1/ig,'<span class="word-highlight">Test1</span>')
This is the content to replace:

/test1/ig
We're searching for 'test1' that is where you'll place your word you want modified. To the right of that is our modifiers. We're using the following:

i: case-insensitive matching
g: global match (finds all matches)

After the comma is our content which replaces that word:
Code:
'<span class="word-highlight">Test1</span>'
Simply add your word between the tags, most commonly it is the same as the content replaced only we're wrapping tags with a class around it.

Last, but not least we just have to write up our CSS:
Code:
.word-highlight{
position:relative;
background-color:#ff0;
}
.word-highlight:hover:after{
box-shadow:2.5px 2.5px 1.5px rgba(0,0,0, 0.5), 3px 3px 6px rgba(255,255,255, 0.5) inset;
background-color:#999;
border:1px solid #999;
display:inline-block;
border-radius:5px;
position:absolute;
bottom:-65px;
right:-65px;
padding:3px;
z-index:1;
content:url('http://illiweb.com/fa/optimisation_fdf/fr/twitter10.png');
}
You can modify all of the above to your liking, but to change the image simply edit this part:
Code:
content:url('http://illiweb.com/fa/optimisation_fdf/fr/twitter10.png');
You can also use candy_fears example if it is only for one single post. However, a span tag should be used so the words remain inline. As for the CSS all is well, but :hover should be before :before. Wink

If you have any questions let us know.
Hi there,

I tried to make it work, but unfortunately it aint working yet.

I added my javascript, my css sheet and a example of the word test1. I used test1 first before going to change it to another word.

I hope you know what I did wrong!





jo3ri132
Forumember

Posts : 35
Reputation : 1
Language : Nederlands

Back to top Go down

In progress Re: Hovering above words.

Post by Ange Tuteur on November 9th 2013, 9:05 pm

My apologies I forgot to add document ready to the script. TT 

Here, replace the old script with the one below and it should work.
Code:
$(document).ready(function(){
$(".postbody > div").each(function() {
$(this).html($(this).html().replace(/test1/ig,'<span class="word-highlight">Test1</span>'));
});
});

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hovering above words.

Post by jo3ri132 on November 10th 2013, 1:45 am

SethC1995 wrote:My apologies I forgot to add document ready to the script. TT 

Here, replace the old script with the one below and it should work.
Code:
$(document).ready(function(){
$(".postbody > div").each(function() {
$(this).html($(this).html().replace(/test1/ig,'<span class="word-highlight">Test1</span>'));
});
});
Hi,

It works now and the word I want gives that image so thanks for that!

Now 1 more question what if I want to make other words with other images on it?

Should I just make another javascript and another css code?

jo3ri132
Forumember

Posts : 35
Reputation : 1
Language : Nederlands

Back to top Go down

In progress Re: Hovering above words.

Post by Ange Tuteur on November 10th 2013, 2:01 am

To apply multiple words to the script you'll do the following.

Edit your current word highlight script then,

After the semi-colon on this line:
Code:
$(this).html($(this).html().replace(/test1/ig,'<span class="word-highlight">Test1</span>'));
Create a line break and paste your new word to replace: (copy of the line above; edit the words and class)
Code:
$(this).html($(this).html().replace(/test2/ig,'<span class="word-highlight2">Test2</span>'));
The result should look like this:
Code:
$(document).ready(function(){
$(".postbody > div").each(function() {
$(this).html($(this).html().replace(/test1/ig,'<span class="word-highlight">Test1</span>'));
$(this).html($(this).html().replace(/test2/ig,'<span class="word-highlight2">Test2</span>'));
});
});
Then we update the script and write up our CSS Very Happy
Code:
.word-highlight{
background-color:#ff0;
}
.word-highlight2{
background-color:#0ff;
}
The result:


It my last CSS for the image effect, if it isn't positioned correctly simply edit these properties and you should be good. thumleft
Code:
bottom:-65px;
right:-65px;

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hovering above words.

Post by jo3ri132 on November 10th 2013, 1:48 pm

SethC1995 wrote:To apply multiple words to the script you'll do the following.

Edit your current word highlight script then,

After the semi-colon on this line:
Code:
$(this).html($(this).html().replace(/test1/ig,'<span class="word-highlight">Test1</span>'));
Create a line break and paste your new word to replace: (copy of the line above; edit the words and class)
Code:
$(this).html($(this).html().replace(/test2/ig,'<span class="word-highlight2">Test2</span>'));
The result should look like this:
Code:
$(document).ready(function(){
$(".postbody > div").each(function() {
$(this).html($(this).html().replace(/test1/ig,'<span class="word-highlight">Test1</span>'));
$(this).html($(this).html().replace(/test2/ig,'<span class="word-highlight2">Test2</span>'));
});
});
Then we update the script and write up our CSS Very Happy
Code:
.word-highlight{
background-color:#ff0;
}
.word-highlight2{
background-color:#0ff;
}
The result:


It my last CSS for the image effect, if it isn't positioned correctly simply edit these properties and you should be good. thumleft
Code:
bottom:-65px;
right:-65px;
Yes, but the result would be a lot of words with the same picture if im right?

I would like to see different pictures on different words, you know how to do this?

jo3ri132
Forumember

Posts : 35
Reputation : 1
Language : Nederlands

Back to top Go down

In progress Re: Hovering above words.

Post by Ange Tuteur on November 10th 2013, 11:04 pm

As long as you change the class here:
(/test2/ig,'<span class="word-highlight2">Test2</span>')

To something different, all you need to do is copy the image CSS, change its selector to your new class, and apply a new image to the content property.

So in all:
.word-highlight1 will have a picture of a flower

and

.word-highlight2 will have a picture of the sky

Just modify the following on the CSS below and you should be good.

.word-highlight to .word-highlight2

.word-highlight:hover:after to .word-highlight2:hover:after

Then you just add a new image to here:

content:url('IMAGE');

Code:
.word-highlight{
position:relative;
background-color:#ff0;
}
.word-highlight:hover:after{
box-shadow:2.5px 2.5px 1.5px rgba(0,0,0, 0.5), 3px 3px 6px rgba(255,255,255, 0.5) inset;
background-color:#999;
border:1px solid #999;
display:inline-block;
border-radius:5px;
position:absolute;
bottom:-65px;
right:-65px;
padding:3px;
z-index:1;
content:url('IMAGE');
}
Make sure you choose some obscure words and not very common words either like 'the' or 'to' otherwise you'll have a lot of these popping up. Razz

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.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