Show only images with hashtag

Discussion in 'HTML & Website Design' started by Makis, Jun 15, 2022.

0
  1. #1
    I have a list of images

    <html>
<body>
<button id="hashtag1" onclick="showImages('#hashtag1')">#hashtag1</button>
<br>
<img src="img1.jpg" class="#hashtag1 #hashtag2">
<img src="img2.jpg" class="#hashtag2 #hashtag3">
<img src="img3.jpg" class="#hashtag1 #hashtag3">
<script>
  function showImages(hastag) {

}
</script>
</body>
</html>
    HTML:
    By default all images are loaded.
    If user clicks button #hastag1 then only images with #hastag1 are displayed.
    I can use a json object to store images data if necessary.
    I am not sure where to store #hashtag data. Inside class attribute, inside images json object or inside alt attribute?
     
    Last edited: Jun 15, 2022
    Makis, Jun 15, 2022 IP
  2. Makis

    Makis Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #2
    A function that converts img tag to json
    html code
    <img id="img1" src="1.jpg" alt="#hashtag1 #hashtag2" class="#hashtag1 hashtag2">
    HTML:
    javascript code
    function imgTagToJSONString(elem) {
  var id   = elem.getAttribute('id');
  var src  = elem.getAttribute('src');
  var alt  = elem.getAttribute('alt');
  var clas = elem.getAttribute('class');
  var res = '{"id":"' + id + '",' + '"src":"' + src + '",'
  + '"alt":"' + alt + '",' + '"class":"' + clas + '"}';
  return res;
}

// Convert img tag to JSON string
var img = document.getElementById('img1');
var imgTagString = imgTagToJSONString(img);
//alert(imgTagString);
// Convert to Object
var imgTagObj = JSON.parse(imgTagString);
//alert(obj.id);
    Code (JavaScript):
     
    Last edited: Jun 15, 2022
    Makis, Jun 15, 2022 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Your code is utter gibberish because classes cannot start with a #. The # indicates an ID in CSS. Classes can/should only contain alphanumeric characters, underscores, and hyphens.

    Laugh is you don't even need JavaScript for this. 

    <input type="checkbox" id="tag1" hidden>
<label for="tag1">Tag 1</label>
<br>
<img src="img1.jpg" class="tag1 tag2" alt="describe this, alt is not optional">
<img src="img2.jpg" class="tag2 tag3" alt="describe this, alt is not optional">
<img src="img3.jpg" class="tag1 tag3" alt="describe this, alt is not optional">
    Code (markup):

    
label[for=tag1] {
  cursor:pointer;
  /* style as a button here */
}

#tag1:checked ~ img:not(.tag1) {
	display:none;
}
    Code (markup):
    Though the way you keeps aying "hash tag" or "hash data" makes me think you don't know that "hashtag" is just what it's called in the address bar and has jack **** to do with what you should be doing in HTML/CSS.

    But what do I know? I still call it a number sign and rail against people calling it a "pound".
     
    deathshadow, Jun 17, 2022 IP