1

I tried a course for JS that made a Hover Gallery project. 5 thumbnails were shown in a line and whichever you hovered, was displayed in a bigger size under them.

Now, the code didn't contain any JS in it, only HTML and CSS. Here it is:

<div class="slider">
  <img class="arrow" onclick="sliderBackward()" src="img/left-arrow.png">              // later added
  <img onmouseover="preview.src=img1.src" name="img1" class="thumbnail" src="img/1.jpg" alt="1">
  <img onmouseover="preview.src=img2.src" name="img2" class="thumbnail" src="img/2.jpg" alt="2">
  <img onmouseover="preview.src=img3.src" name="img3" class="thumbnail" src="img/3.jpg" alt="3">
  <img onmouseover="preview.src=img4.src" name="img4" class="thumbnail" src="img/4.jpg" alt="4">
  <img onmouseover="preview.src=img5.src" name="img5" class="thumbnail" src="img/5.jpg" alt="5">
  <img class="arrow" onclick="sliderForward()" src="img/right-arrow.png">              // later added
</div>
<div class="preview">
  <img name="preview" src="img/1.jpg">
</div>

My question: Is using the name attribute this way alright? I think that this mini project is a good example to show features but not one, that should be put in practise in bigger projects. Is that right?

Goal: I wanted to show the further added thumbnails when I click on an arrow button and hide the other end of the list. (It would always show 5). For this I'm thinking if I should just delete the name attributes and approach it only through JS.

Steve
  • 13
  • 5
  • 1
    "the code didn't contain any JS in it," yes it does, everything that's in `onclick` and `onmouseover` attributes is actually JS. There is also a `sliderForward` function being defined elsewhere. And now, what do you think the `name` does here? – Kaiido Nov 15 '22 at 12:02
  • "yes it does, everything that's in onclick and onmouseover attributes is actually JS" Yea, later I found that out. Thank you! The slider functions were later added as written in comments, but sry I didn't mention it in the description. In this example the name is used to identify a certain img element and set the preview img's source to that's source. To be more precise: My question is that is it a good practise to use naming in for example an external JS file as it's usually external as far as I know? – Steve Nov 16 '22 at 08:40
  • Oh I missed that it was doing a named access on global. Then, no, this is not fine. The whole event attribute is not fine, but if you go this route, then you could do simply `preview.src=src`, but better use event delegation and a proper `addEventListener("mouseover")`: https://jsfiddle.net/wakcof85/ – Kaiido Nov 16 '22 at 08:49
  • Yea, this is how I imagined it better coded. There are functions in your solution, I am not familiar with, but it showed me a way. Thank you! – Steve Nov 21 '22 at 14:33

1 Answers1

0

I think its better practice to use id rather than name to create unique identifiers. Name is often used in forms (I believe that's really what its for) and you could have multiple inputs with the same name. ID on the other hand is a very handy way to identify/select elements within the dom and should be unique.

That being said, there is nothing against you using name in this manner, its just not what its for.

Vayne Valerius
  • 158
  • 1
  • 9
  • I've read somewhere that IDs shouldn't be used that much because of performance efficiency and it's not really a frequent practise. But that maybe only stands for CSS. Thank you for your answer. – Steve Nov 16 '22 at 08:49