How to know the name of an image with JS?

Asked

Viewed 245 times

5

I wrote a code in which he creates a slide of images in a div, I wonder if with Javascript it is possible to know the name of the image you are passing on the slide, because when the image appears, I want a descriptive text about it in a div next door.

I searched but could not find a way to know the name of the image through Javascript.

Is there any way to do this with Javascript, or will I have to use another way to make the text appear according to the image?
In case I have to use another medium or if you know any better, please give me a hand.

Follows the code:

#slideShow {
    background-color:#eeeeee;
    width:400px;
    height:150px;
    border:2px solid darkgray;
    -webkit-transition: background-image 2s;
}
div#anterior {
    width:100px;
    height:300px;
    transition: 2s;
    text-align:center;
    font-size:0px;
}
div#anterior:hover {
    background-color:white;
    opacity:0.4;
    font-size:150px;
}
div#proximo {
    width:100px;
    height:300px;
    transition: 2s;
    margin-left:300px;
    margin-top:-300px;
    text-align:center;
    font-size:0px;
}
div#proximo:hover {
    background-color:white;
    opacity:0.4;
    font-size:150px;
}

function iniciarSlide() {
    max = 6;
    min = 1;
    fi = min;
    carregarFoto("f1.jpg");
    tr = true;
    document.getElementById("slideShow").addEventListener("transitionend", fimTr)
}
function fimTr() {
    tr = true;
}
function carregarFoto(foto) {
    document.getElementById("slideShow").style.backgroundImage="URL("+foto+")";
}
function prox() {
    if(tr == true) {
        tr = false;
        fi++;
        if (fi > max) {
            fi = min;
        }
        carregarFoto("f"+fi+".jpg");
    }
}
function ant() {
    if (tr = true) {
        tr = false;
        fi--;
        if (fi < min) {
            fi = max;
        }
        carregarFoto("f"+fi+".jpg");
    }
}

<body onload="iniciarSlide()">
    <div id="slideShow">
        <div id="anterior" onclick="ant()"></div>
        <div id="proximo" onclick="prox()"></div>
    </div>
</body>
javascript html

  • The way you’re doing the only way to get the name is by the same link.

  • 2

    In your case I would do as follows: load an array with the link plus name and every time you select the index loads the link and the name for an element in HTML, you can understand ?

1 answer

3


Following the logic I described in the commentary, below is an example.

var slide = document.getElementById('slide');
var descr = document.getElementById('descr');

var arrImgs = [
    ['Burguer King', 'https://upload.wikimedia.org/wikipedia/en/3/3a/Burger_King_Logo.svg'],
    ['Mc Donald\'s', 'https://upload.wikimedia.org/wikipedia/commons/3/36/McDonald%27s_Golden_Arches.svg'],
    ['Coca Cola', 'https://upload.wikimedia.org/wikipedia/commons/c/ce/Coca-Cola_logo.svg']];
var index = 0;

function fSlide(id) {
    
	id === 'prox' ? index === arrImgs.length -1 ? '' : index++ : id === 'prev' ? index < 1 ? '' : index-- : '';
    
	slide.setAttribute('src', arrImgs[index][1]);
    descr.innerText = arrImgs[index][0];
}

window.addEventListener('click', function(e) {
	if(e.target.id === 'prev' || e.target.id === 'prox') {
        fSlide(e.target.id);
    }
});

fSlide();
div, img {
    color: red;
    display: inline-block;
    height: 50px;
    width: 100px;
}
span {
    cursor: pointer; 
}
<span id="prev">Anterior</span>
<div><img id="slide"></img><p id="descr"></p></div>
<span id="prox">Proxima</span>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.