How to hover over text (later a link) and have image and text next to it show up

Question

I have a simple webpage with "site map" on bottom that won't be implemented for weeks or months and am developing the rest as I go.

So, "Site Map" needs to be a link (I presume) with "href=" (?) where I can add a link later? Upon hover, I need text saying "coming soon" to show up, along with an image on both sides, i.e.

(before hover)

Site Map

(after hover)

Site Map Coming Soon

There should be a little space between the pic and text that pops up.

 #my_map:hover:after {
     margin-left: 20px;
     color: green;
     content: "(Coming Soon)";
    }

    <h1>Before and After Tag Example</h1>
    
    <p id="my_map">Site Map</p>
    
    <p><a HREF= "menu.html">Go back to Main Menu</a></p>
    
    <span> <img src="lightening_bolt" alt="bolt" height="20" width="20";> coming soon <img src="lightening_bolt" alt="bolt" height="20" width="20";> </span>
    
    <p style "margin-top: 50px;">Hover over Site Map... </p>

Above isn't allowing for an image, just content= some text, and all the searching I've done to find some code ideas seem to be with other objectives...

MichaelvE · Answer 1 · 2019-06-12T22:50:43.220

You can add an image to the content of an :after pseudo element by using the url() attribute. If you want text as well as an image, you need to string these together without a space. If you want space between the image and the text, just be sure to include the spaces withing your text string. The snippet below shows an image placed before and after the string.

Note: the images take a second or two to load.

var myMap = document.getElementById("my_map2");
var comingSooon = document.getElementById("my_map2");
//
myMap.addEventListener("mouseover", function() {
  cs.innerHTML = "<img src='https://picsum.photos/200' height='15' width='40' /> (Coming Soon) <img src='https://picsum.photos/200'  height='15' width='40' />";
}, false);
//
myMap.addEventListener("mouseout", function() {
  cs.innerHTML = "";
}, false);

#my_map:hover:after {
  margin-left: 20px;
  font-size: 20px;
  color: green;
  content: url("https://picsum.photos/20")" (Coming Soon) "url("https://picsum.photos/20");
}

<p id="my_map"><a href="#">Site Map</a></p>

<p><a href="#" id="my_map2">Site Map 2</a> <span id="cs"></span></p>

Thanks, I see it working on the site, but my pictures are huge, text small, and "adjusting" the line height (30 px;) didn't seem to do anything. I looked up "url" on the ww3schools website looking for arguments and struck out ... Can you tell me how to make the pics show up at a specified size? Thanks again!!! — grug.crood, Jun 12 '19 at 22:26
I only set the line height because I didn't like how the the screen jumps when the images show. There are ways to scale the content using transform: scale() attribute, (See here https://stackoverflow.com/questions/8977957/can-i-change-the-height-of-an-image-in-css-before-after-pseudo-elements) but this will scale the text as well. So you probably won't want that. I would suggest a totally different solution using JavaScript to populate a new element placed after your link, so you can use image tags and adjust the height and width just right. There's a 2nd example in the snippet showing this. — MichaelvE, Jun 12 '19 at 22:55

score 0 · Answer 2 · edited Jun 13 '19 at 05:11

You could also just have the image already there and hide it until the anchor is hovered over:

#map-link {
  display: inline-block;
}

#hidden-message {
  display: none;
  transition: display 1s linear;
}

#map-link:hover+#hidden-message {
  display: block;
}

#cmg-soon-img {
  margin: 0;
  padding: 0;
  height: 100px;
  width: 100px;
}

<div id="my_map">
  <p id="map-link"><a href="#">Site Map</a></p>

  <div id="hidden-message">
    <img id="cmg-soon-img" src="https://picsum.photos/20">
    <p>
      "Coming soon..."
    </p>
  </div>
</div>

Which would allow you to control the width and height of the image shown.

score 0 · Answer 3 · answered Jun 13 '19 at 19:17

<!-- Here's what I got (hope answer my own question doesn't close thread...-->
<!DOCTYPE html>
<html>
<head>

<style>

    #my_map {
        margin-right: 30px;
        font-size: 35px;
        text-decoration: none;
    }

</style>

</head>

<body>

    <p><a href="#" id="my_map">Site Map</a> <span id="cs"></span></p>

    <script>

        var myMap = document.getElementById("my_map");
        var comingSooon = document.getElementById("my_map");

        myMap.addEventListener("mouseover", function() {cs.innerHTML = "<img src='https://picsum.photos/20' height='35' width='35' /> (Coming Soon) <img src='https://picsum.photos/20' height='35' width='35' />";}, false);

        myMap.addEventListener("mouseout", function() {cs.innerHTML = "";}, false);

    </script>    

</body>
</html>

score -1 · Answer 4 · answered Jun 13 '19 at 04:39

-1

<!doctype html>
<html>
<head>

<style>

    #soon:hover:after {
        margin-left: 20px;
        color: green;
        content: "Soon";
    }

</style>
</head>

<body>

<p id="soon" style="font-size: 25px; margin-left:5%;"> Site Map </p>

<p style="margin-bottom: 150px;"></p>

<!-- take out the image and it's broken... it shows what I'm trying to do... -->

<img src="lightening-bolt.jpg" alt="Lightening bolt" 

height="42" width="42">

<script>


function myFunction() {

  var x = document.getElementById("myDIV");
  if (x.style.display === "inline") {
    x.style.display = "none";
  } else {
    x.style.display = "inline";
  }
}

</script>

 <p style="display: inline" onmouseover="myFunction()"

   onmouseleave="myFunction()">Click Me

 </p>

<div id="myDIV">
 <span><img src="lightening-bolt.jpg" alt="Lightening bolt" 

height="42" width="42"> Text <img src="399-3991460_face-with-stuck-out-tongue-

eye.jpg" alt="Lightening bolt" 

height="42" width="42">  </span>
</div> 
</body>
</html>

answered Jun 13 '19 at 04:39

user11640229

1

You will want to add some written explanation to your answer. What did you change? How are you solving the question posed? Also will help tremendously to use the stack snippet interface so your answer can be run and the result checked out like the answers above.. – BugsArePeopleToo Jun 13 '19 at 05:06
On the bottom code; On Chrome, the initial load shows "Site Map" way up top, then couple inches down; "Click Me" Text On mouse hover over "Click Me" I get; "Click Me"Text And when moved away; "Click Me" Then it works thereafter save for the image in front that stays before "Click Me", that should not be there. I had a version doing this too, but when the image that stays when it shouldn't was removed, it didn't work any more. – grug.crood Jun 13 '19 at 17:39
On the one before it, with the line: var myMap = document.getElementById("my_map2"); I presume the above line goes into (?), between tags? I put the #my_map:hover... code between tags into , is that right? The top link worked but the images were huge and the link2 doesn't work. I tried it with and without the "//", and also with the script moved into the head section. – grug.crood Jun 13 '19 at 17:39
BTW, I tried to enter the above as formatted text with lines between (by putting code tags and /* lines */, but couldn't figure out how, sorry for the mess above, please if there is a way let me know (I didn't want to start a new thread). Much appreciation for the responses --- it is hard to believe how difficult a seeming simple thing can be... . I only know a little HTML and CSS, but have programmed in C, so the JS code is understandable. Thanks again, hope it can be done - hate to quit after sooooo much effort!!! – grug.crood Jun 13 '19 at 17:43
Got further along, had the script before the paragraph, now it works except want bigger text in the middle of the two images, where I can set the font-size and color? Wish I could post what it looks like now, but don't know how to insert formatted code. Also, put in position=absolute on formatting for the link, and the pics went on top --- good effect if I could turn off the link visibility while the cursor is still over where it was... – grug.crood Jun 13 '19 at 19:13

How to hover over text (later a link) and have image and text next to it show up

4 Answers4