Can’t get my head round this. I had a page that worked well but did not validate The code for the particular place was
<div class="ad">
<div class="metro">
<a href="/Europe/images/metroBcn.jpg" alt="Map of Barcelona Metro lines" width="1398" height="770" target="_blank"><b>Press here</b> to see larger map.
</div>
<div class="img-container"><img title="Map Metro Barcelona" alt="Map of Metro of Barcelona" width="500" height="275" src="../images/MetroBcn500.jpg"></a>
</div>
</div>
After a lot of trial and error I got it to validate but the page did not work: the larger image did not show up. Somehow the validaot did not like the alt , width, and height
So, I’m now left with this which works biút still does n ot validate.
<div class="ad">
<div class="metro">
<a href="/Europe/images/metroBcn.jpg" target="_blank"><b>Press here</b> to see larger map.
</div><!-- close metro -->
<div class="img-container"><img title="Map Metro Barcelona" alt="Map of Metro of Barcelona" width="500" height="275" src="../images/MetroBcn500.jpg"></div></a>
</div><!-- close ad -->
Validation Output: 2 Errors
Line 410, Column 6: End tag div seen, but there were open elements.</div><!-- close metro -->
✉
Line 408, Column 55: Unclosed element a.…rope/images/metroBcn.jpg" target="_blank"><b>Press here</b> to see larger map.
I’d gone through this before and did not see the full picture…
Like this
<div class="ad">
<div class="metro">
<a href="/Europe/images/metroBcn.jpg" target="_blank"><b>Press here</b> to see larger map.</a>
</div><!-- close metro -->
<div class="img-container"><img title="Map Metro Barcelona" alt="Map of Metro of Barcelona" width="500" height="275" src="../images/MetroBcn500.jpg"></div>
</div><!-- close ad -->
it validates and works if you press the “press here” but I wanted it to continue working if you pressed also the actual smaller image.
You’ll need to link the smaller image and the press here text, as they have two different purposes (right?). Why not pull the press here text out of the metro container because it’s already linked and put that text in separate button.
<div class="ad">
<div class="metro"><a href="/Europe/images/metroBcn.jpg" target="_blank"></a></div><!-- close metro -->
<div class="link-button"><a href="../images/MetroBcn500.jpg"><b>Press here</b> to see larger map.</a></div>
<div class="img-container"><img title="Map Metro Barcelona" alt="Map of Metro of Barcelona" width="500" height="275" </div>
</div> <!--close ad-->
the bottom larger image code will need some changes, as it is the larger image will be showing by default. Do you have some js that changes the img-container display?
there’s no user input, so what are you validating? You mean the console errors?
The text is linked fine. Just close the a tag within the div metro like above…
Then make a new a href in img container
<div class="img-container"><a href="image you want to link to" target="_blank"><img title="Map Metro Barcelona" alt="Map of Metro of Barcelona" width="500" height="275" src="../images/MetroBcn500.jpg"></a></div>
<div class="img-container"><a href="/Europe/images/metroBcn.jpg" target="_blank"><img title="Map Metro Barcelona" alt="Map of Metro of Barcelona" width="500" height="275" src="../images/MetroBcn500.jpg"></a></div>