Store text in image to retrieve w/ javascript?

Question

I am working on my art portfolio website. I found that I could store a larger image in a thumbnail image via "data-src", which can be encoded into said thumbnail. For example:

<img src="images/breads_thumbnail.jpg" alt="Breads" data-src="images/breads.jpg"/>

This can then be retrieved with javascript to be displayed in full size in the center of the div, as such:

$(document).ready(function () {
$("#display img").click( function() {
    $('#picture').attr('src', $(this).data('src'));
    $('#picture').attr('alt', $(this).attr('alt'));
});

My question is this: Is it possible to do the same thing with text? I am attempting to make text (explaining the image) appear when the larger image is hovered over. It cannot be the same text for each image, so I was hoping there was a way to encode it in the thumbnail image and retrieve it in the same way.

Here is what the site looks like, if it helps:

Answer 1

Yes, this is called using a data attribute. In your example, you are doing this with a thumbnail image using the "data-src" attribute.

But, data attributes can be anything--there are arbitrary and meant for this exact situation: to access that data with JavaScript.

Check out this article from MDN: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

So, you could do for example:

<img src="images/breads_thumbnail.jpg" alt="Breads" data-src="images/breads.jpg" data-index-number="8"/>

I made up the attribute "data-index-number". It can have any name as long as it begins with 'data-'.

Answer 2

Yeah for sure ,

This is a pen i made a few months back , It's sloppy prototype code , but maybe it will be of some help.

https://codepen.io/miaklwalker/pen/JjdvyvK

This is the important bit of code

class ImageWrapper {
    constructor(size,name) {
        this.id = makeUniqueId(23,3);
        this.size = size;
        this.name = name;
        this.img = this.init();
    }
    init(){
        const {dimensions} = this.size;

        const [width,height] = dimensions.split('x');

        let imgWrapper = document.createElement('div');
        imgWrapper.width = width;
        imgWrapper.height = height;
        imgWrapper.classList.add('img-wrapper');
        imgWrapper.classList.add(this.size.size);

        let a = document.createElement('a');
        a.width = `${width}px`;
        a.height = `${height}px`;
        imgWrapper.append(a);
        a.classList.add(`img-id-${this.id}`);
        return imgWrapper;
    }
    addImg(img){
        this.img.append(img);
    }
    addName(name){
      this.name = name;
         const contentStyle = `
        .img-wrapper:hover > a.img-id-${this.id}::after{
            content:'${this.name}';
        }`;
        document.styleSheets[0].insertRule(contentStyle);
    }

}

The big thing this does is create a custom CSS class for this object with a unique id and then attaches that unique ID to the element

Like i said this was sloppy prototype code but the idea is valid

BASICALLY

1. Write Text
2. Create a unique class or ID for the image
3. Create some CSS code that accomplishes what you want
4. Then make a function that generates the css with the text you want and the unique class selector
5. attach that to your document either to the style sheet directly or just append the style element to the head of your document

/**
*
* @param length The Length of the id specified in character count
* @param idConfigString - [0 - 4 ] or [alphaNumeric ,alphaNumericLowerCase ,alpha ,alphaLower, alphaUpper]
* @returns {string} matching the length and config property
*/

function makeUniqueId(length,idConfigString = 4){
const NUMBER = 'NUMBER';
const LOWER = 'LOWER';
const UPPER = 'UPPER';

const alphaNumeric = () => Math.random() > .5 ? NUMBER : Math.random() > .5 ? UPPER : LOWER ;
const alphaNumericLowerCase = () => Math.random() > .5 ? NUMBER : LOWER;
const alpha = ()=> Math.random() > .5 ? UPPER : LOWER;
const alphaLower =()=> LOWER;
const alphaUpper =()=> UPPER;

const strategy = {
 alphaNumeric,
 alphaNumericLowerCase,
 alpha,
 alphaLower,
 alphaUpper,
 "0":alphaNumeric,
 "1":alphaNumericLowerCase,
 "2": alpha,
 "3": alphaLower,
 "4": alphaUpper,
};
const charTypes = {NUMBER:{min:48,max:57},UPPER:{min:65,max:90},LOWER:{min:97,max:122}};

const pickNumber = ({min,max})=> Math.floor(Math.random() * (max-min) + min);

const chooseChar = (ranNum) => String.fromCharCode(ranNum);

 let i = 0;
 let ID = '';
 while(i < length){
     ID+=chooseChar(pickNumber(charTypes[strategy[idConfigString]()]));
     i++
 }
 return ID;
}

This is a little ID generator function i made that works really well for me

Hope this helps and that i understood your question correctly

let me know if you have anymore questions