How to display data from a .txt file on hover over an image?

Question

The following code can display code on hovering over the image but only the text that's written in the span tag:

<html>
<style type="text/css"> 

div#photo_container{max-width:25em;height:auto;position:relative;margin:1.563em auto;}

div#photo_container a{text-decoration:none;color:black;cursor:default;font-weight:normal; font-family: "Roboto", sans-serif; color: white}

div#photo_container a span{visibility:hidden;position:absolute;left:15em;top:-2.3em;background:#333333;width:17em;border:1px solid #404040;font-size:0.8em;padding:0.3em;cursor:default;line-height:140%;border-radius: 6px;}

div#photo_container a:hover span{visibility:visible;}

</style>


<div id="photo_container">
<a href="#">
    <img src="https://vignette.wikia.nocookie.net/youtubepoop/images/f/f7/5Pikachu.png" width="250" height="250" alt="PIKACHU">
        <span>
            Pikachu is a short, chubby rodent Pokémon. It is covered in yellow fur with two horizontal brown stripes on its back. It has a small mouth, long, pointed ears with black tips, brown eyes, and two red circles on its cheeks. There are pouches inside its cheeks where it stores electricity. It has short forearms with five fingers on each paw, and its feet each have three toes. At the base of its lightning bolt-shaped tail is patch of brown fur at the base
        </span>
</a>
</div> 
</html>

but I don't want to hard code the info in span tag and want to upload it from a text file called dummy.txt.

I have a JQuery code to upload and display the info from the text too but I don't know how to merge these two. Please help me.

Here's the JQuery code to upload a text file from local machine to html page:

<script>
        $(document).ready(function(){
            $("#<id_name>").load("dummy.txt");
        });
</script>

The answer over on https://stackoverflow.com/a/196550/2732969 could help in solving this... — Anon, Jun 15 '18 at 20:56
Also see jQuery's [`on`](https://api.jquery.com/on/) (or [`mouseenter`](https://api.jquery.com/mouseenter/)). — showdev, Jun 15 '18 at 21:14

Damián Pablo González · Accepted Answer · 2018-06-15T21:27:17.703

2

You were close. You have to use the .get method, which is a shorthand of the Ajax method and

Loads data from the server using a HTTP GET request.

You can use it like this:

$.get('dummy.txt', function(myText){
    $('#photo_container span').text(myText);
});

The second parameter here is the equivalent of the success function.

I'm using the .text() method because it's a span tag and it's plain text. If you format your text in html, you'll have to use the .html() method.

edited Jun 15 '18 at 21:27

answered Jun 15 '18 at 21:15

Damián Pablo González

1,008
8
14

1

Oh okay got it! Thanks Damian! – Aakanksha Choudhary Jun 18 '18 at 04:52
1

@aakanksha-choudhary Psst! If Damián's answer worked for you don't forget to accept it :-) – Anon Jun 18 '18 at 05:48

score 1 · Answer 2 · answered Jun 18 '18 at 02:54

No need to use jQuery and ajax for this. Use object tag and load data and use it in span directly.

<html>
<style type="text/css"> 

div#photo_container{max-width:25em;height:auto;position:relative;margin:1.563em auto;}

div#photo_container a{text-decoration:none;color:black;cursor:default;font-weight:normal; font-family: "Roboto", sans-serif; color: white}

div#photo_container a span{visibility:hidden;position:absolute;left:15em;top:-2.3em;background:#333333;width:17em;border:1px solid #404040;font-size:0.8em;padding:0.3em;cursor:default;line-height:140%;border-radius: 6px;}

div#photo_container a:hover span{visibility:visible;}

</style>


<div id="photo_container">
<a href="#">
    <img src="https://vignette.wikia.nocookie.net/youtubepoop/images/f/f7/5Pikachu.png" width="250" height="250" alt="PIKACHU">
        <span>
           **<object width="400" height="400" data="textfile.txt"></object>**
        </span>
</a>
</div> 
</html>

How to display data from a .txt file on hover over an image?

2 Answers2