The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Display Image While Hovering Over Text

3 posters

Go down

Solved Display Image While Hovering Over Text

Post by ghostdrifter11 Wed 27 Sep 2023 - 17:20

Hello everyone,

I'm wondering if there is any code that would allow an image (preferably .jpg or .png file formats) to be displayed when text is hovered over? I have found a few different tutorials online but none of them seem to work properly when I put them into a post. If possible, I would also like to dictate what size the displayed image appears as as well.

Thank you all in advance.

Forum Link --> https://yugiohduelacademia.forumotion.com/
Forum Version --> ModernBB


Last edited by ghostdrifter11 on Thu 28 Sep 2023 - 18:30; edited 1 time in total
ghostdrifter11
ghostdrifter11
Forumember

Posts : 85
Reputation : 4
Language : English

https://narutoshotai.forumotion.com/

Back to top Go down

Solved Re: Display Image While Hovering Over Text

Post by Razor12345 Wed 27 Sep 2023 - 18:46

Good evening!

Can you provide an example?
In any case, we won't be able to set a specific kind of extension for images - they will need to be uploaded to the hosting.


Display Image While Hovering Over Text Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1583
Reputation : 268
Language : Ukr, Rus, Eng
Location : Ukraine

Back to top Go down

Solved Re: Display Image While Hovering Over Text

Post by skouliki Wed 27 Sep 2023 - 18:54

is this for category or forum description? meaning the text of the description when hovering will show an image

or is this when you post a comment ?
skouliki
skouliki
Manager
Manager

Female Posts : 15391
Reputation : 1709
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Display Image While Hovering Over Text

Post by ghostdrifter11 Wed 27 Sep 2023 - 19:11

This would specifically be for when a post is made.

For example, in this post I've made here, when I hover over the names of cards, I'd like for an image of the card to be displayed.

For example, if I were to hover over 'Archnemeses Protos', I'd like for this image to be displayed...

Display Image While Hovering Over Text Ezgif-com-webp-to-jpg-8
ghostdrifter11
ghostdrifter11
Forumember

Posts : 85
Reputation : 4
Language : English

https://narutoshotai.forumotion.com/

Back to top Go down

Solved Re: Display Image While Hovering Over Text

Post by skouliki Wed 27 Sep 2023 - 20:04

i know you can do it in an HTML page but in a post maybe you can archive this with a javascript
skouliki
skouliki
Manager
Manager

Female Posts : 15391
Reputation : 1709
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

ghostdrifter11 likes this post

Back to top Go down

Solved Re: Display Image While Hovering Over Text

Post by Razor12345 Wed 27 Sep 2023 - 21:19

1) AP - General - Messages and emails - Configuration - Allow HTML - Yes - Save.

2) AP - Display - Templates - General - viewtopic_body

At the end of the template, insert the code:

Code:
  <script>
 
  window.addEventListener('load', function() {
  const listOfSpecialText = document.querySelectorAll('.hover_span');
  const listOfSpecialTitle = document.querySelectorAll('.hover_div');
  const allPosts = document.querySelectorAll('div.content');
  if (listOfSpecialText) {
    listOfSpecialText.forEach((item, index) => {
      item.addEventListener('mouseover', function() {
        listOfSpecialTitle[index].classList.add('active');
      });
    });
    listOfSpecialText.forEach((item, index) => {
      item.addEventListener('mouseout', function() {
        listOfSpecialTitle[index].classList.remove('active');
      });
    });
    allPosts.forEach((item) => {
      const brElements = item.querySelectorAll('br');
      if (brElements) {
        brElements.forEach((brElement) => {
          const pElement = document.createElement('p');
          brElement.parentNode.insertBefore(pElement, brElement);
          brElement.parentNode.removeChild(brElement);
        });
      }
    });
  }
  });
</script>

Save. Publish.

3) AP - Display - Colors & CSS - CSS Stylesheet

Add this code:

Code:
.hover_div {
  display: none;
}

.hover_div {
  display: none;
}

.hover_div.active {
  display: block;
  position: absolute;
  max-width: 150px;
  max-height: 150px;
  left: 0;
}

.hover_span {
  position: relative;
  display: inline-block;
}

.hover_span {
  position: relative;
  display: inline-block;
}

Save.

Code:
max-width: 150px;
and
Code:
max-height: 150px;
- maximum image sizes

For example, the text of the message:

Code:
<span class='hover_span'>[color=#FF0000]you avatar[/color]
<div class='hover_div'><img src="LINK IMAGE" /></div></span> dfdfdfdfdfdfdfdfdfdfddfdfdfdfdfdfdfdfdfdfd
[right]<span class='hover_span'>another avatar
<div class='hover_div'><img src="LINK IMAGE" /></div></span>[/right]

you avatar and another avatar - text, on hovering over which the picture will appear
LINK IMAGE - links to relevant images

Result:

Display Image While Hovering Over Text Scree373
Display Image While Hovering Over Text Scree374


Display Image While Hovering Over Text Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1583
Reputation : 268
Language : Ukr, Rus, Eng
Location : Ukraine

skouliki, sivastar, TonnyKamper and ghostdrifter11 like this post

Back to top Go down

Solved Re: Display Image While Hovering Over Text

Post by ghostdrifter11 Thu 28 Sep 2023 - 16:35

</br>
Razor12345 wrote:
Code:
max-width: 150px;
and
Code:
max-height: 150px;
- maximum image sizes

@Razor12345 I increased the maximum size of the image within in the CSS but in the post it is displaying as super tiny. Is there anyway I can fix this to display as the maximum image size?
ghostdrifter11
ghostdrifter11
Forumember

Posts : 85
Reputation : 4
Language : English

https://narutoshotai.forumotion.com/

Back to top Go down

Solved Re: Display Image While Hovering Over Text

Post by Razor12345 Thu 28 Sep 2023 - 17:35

Replace this code:
Code:
.hover_div.active {
  display: block;
  position: absolute;
  max-width: 150px;
  max-height: 150px;
  left: 0;
}

by this

Code:
.hover_div.active {
  display: block;
  position: absolute;
  left: 0;
  width: 400px
  height: 400px;
  z-index: 10;
}

This code is responsible for the size of the shell in which the image resides.

And add this code:

Code:
.hover_div.active img {
  width: 350px;
  height: 350px;
}

This code is responsible for the size of the images

Result:

Display Image While Hovering Over Text Scree380


Display Image While Hovering Over Text Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1583
Reputation : 268
Language : Ukr, Rus, Eng
Location : Ukraine

TonnyKamper and ghostdrifter11 like this post

Back to top Go down

Solved Re: Display Image While Hovering Over Text

Post by ghostdrifter11 Thu 28 Sep 2023 - 18:29

Okee that worked. Thank you so much, @Razor12345 Display Image While Hovering Over Text 2764
ghostdrifter11
ghostdrifter11
Forumember

Posts : 85
Reputation : 4
Language : English

https://narutoshotai.forumotion.com/

Back to top Go down

Solved Re: Display Image While Hovering Over Text

Post by Razor12345 Thu 28 Sep 2023 - 18:32

You are welcome!

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


Display Image While Hovering Over Text Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1583
Reputation : 268
Language : Ukr, Rus, Eng
Location : Ukraine

Back to top Go down

Back to top

- Similar topics

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