Hovering above words.

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!

image example, may be i can help u

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

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://2img.net/i/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://2img.net/i/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.

If you have any questions let us know.

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://2img.net/i/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://2img.net/i/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.

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!

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

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>'));
});
});

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

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?

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

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.

Code:

bottom:-65px;
right:-65px;

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

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.

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?

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.