Click here to Skip to main content
15,886,110 members
Please Sign up or sign in to vote.
2.00/5 (1 vote)
See more:
I have done a Image project where I select a Image and it highlights the selected one and displays the 'alt' name of the selected image in the list(which was working fine till i add 'more info' link to image)
Now after adding the "more info" link using
CSS
position:relative
and
CSS
position:absolute
The JS is not retrieving the name of the image and the selected image border is way more bigger than I've given and other images around it changes position here is the full code of the project if u need to check JSFiddle
Below are the codes snippets from where i went wrong
HTML
HTML
<div class="container" id="imagezone">
    <ul id="list">
        <li>Image1</li>
        <li>Image2</li>
        <li>Image3</li>
        <li>Image4</li>
        <li>Image5</li>
        <li>Image6</li>
        <li>Image7</li>
        <li>Image8</li>
        <li>Image9</li>
    </ul>
    <div id="images">
    <div class="content"><img id="adj" src="images/Chrysanthemum.jpg" alt="Chrysanthemum" width="300" height="200"><a href="#">more info</a><span>This is some description about the Image.</span></div>

    <div class="content"><img id="adj" src="images/desert.jpg" alt="desert" width="300" height="200"><a href="#">more info</a><span>This is some description about the Image.</span></div>

    <div class="content"><img id="adj" src="images/Hydrangeas.jpg" alt="Hydrangeas" width="300" height="200"><a href="#">more info</a><span>This is some description about the Image.</span></div>

    <div class="content"><img id="adj" src="images/jellyfish.jpg" alt="jellyfish" width="300" height="200"><a href="#">more info</a><span>This is some description about the Image.</span></div>

    <div class="content"><img id="adj" src="images/koala.jpg" alt="koala" width="300" height="200"><a href="#">more info</a><span>This is some description about the Image.</span></div>

    <div class="content"><img id="adj" src="images/lighthouse.jpg" alt="lighthouse" width="300" height="200"><a href="#">more info</a><span>This is some description about the Image.</span></div>

    <div class="content"><img id="adj" src="images/penguins.jpg" alt="penguins" width="300" height="200"><a href="#">more info</a><span>This is some description about the Image.</span></div>

    <div class="content"><img id="adj" src="images/tulips.jpg" alt="tulips" width="300" height="200"><a href="#">more info</a><span>This is some description about the Image.</span></div>

    <div class="content"><img id="adj" src="images/dbz.jpg" alt="dbz" width="300" height="200"><a href="#">more info</a><span>This is some description about the Image.</span></div>

    </div>
</div>

CSS
CSS
#images div{
	position: relative;
	float: left;
}
#images img {
	position: relative;
}

#images a {
  right: 10px;
  position: absolute;
  bottom: 10px;
  color: #ffffff;
  font-family: cursive;
}

#images a:hover + span,
span:hover {
  display: block;
}

span {
  top: 10px;
  position: absolute;
  display: none;
  left: 10px;
  padding: 10px;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
  background: rgba(255,255,255,0.7);
  color: black;
  overflow: auto;
  font-family: sans-serif;
}

JS
JavaScript
var imgs = document.getElementById("images");
var list = document.getElementById("list");
var cN = "active";
var memory = {
    "index": 0,
    "value": "Image1"
}

for (var i = 0; i < imgs.children.length; i += 1) {
    (function(i) {
        imgs.children[i].addEventListener("click", function() {
            if (memory.position !== i) {
                list.children[memory.index].innerHTML = memory.value;
                memory.value = list.children[i].innerHTML;
                imgs.children[memory.index].className = "";
            }
            memory.index = i;
            list.children[i].innerHTML = this.alt;
            imgs.children[i].className = cN;
        });
    })(i);
}


What I have tried:

I've tried using document.getElementByClassName to retrieve the image alt name, but no luck.
Image part I've no idea whats happening it seems everything is correct upto my knowledge.
Posted
Updated 17-Jun-16 0:58am

1 solution

You have this in your CSS
C#
.container #images img:hover {
    cursor: pointer;
    border: 3px solid blue;



If you don't want images to dance, don't put big border on the hover. Or if you want to have it, put on each image transparent border of the same width.
 
Share this answer
 
Comments
Jimmy-IN 18-Jun-16 2:53am    
how to set invisible border.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900