How to know the name of an image with JS?

Question

How to know the name of an image with JS?

Navigation

#1 by (4 votes)

5

I wrote a code in which it creates a slide of images in a div , I would like to know if with Javascript it is possible to know the name of the image that is passing on the slide, because when the image appears, I want a text to appear descriptive on it in a div on the side.

I searched but could not find a way to know the image name 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? If you have to use another medium or if you know some better, please give me some help.

Follow 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

asked by anonymous 13.11.2015 / 22:26

1 answer

Avoid more than one record in the database How to keep a rotated text centered in a dynamic height div?

score 4 · Answer 1

Following the logic I described in the comment, here's an example below.

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>