Member Avatar for Latrell_vie

i have a restaurant dropdown menulist, when sb clicks the one of the various meals i want a picture of it to <img id="menupic"src="picFold/actualPic.jpg" alt="Foto der Men&uumlliste">. I only had partial success , who can help me finalize this task ? thx

sofar :

menu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 <title>Speisemenue</title>
<link rel="stylesheet" href="jquery-ui-theme.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="style.css">
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
<style>
.ui-menu { width: 150px; }
</style>
</head>
<body style="background:darkred">
<div><a class="homeButton" href="index.html">Home</a></div>
<ul id="menu">
<li>Pizzen
    <ul>
        <li onclick="actualPicSwap()" <img src="picFold/Pic13.jpg" >Pizza Mageritha  4,90€ - <span class="listenBildKonfig">Bild</span></li>
        <li onclick="actualPicSwap()" <img src="picFold/Pic13.jpg" > >Pizza Cardinale 5,90€ - <span class="listenBildKonfig">Bild</span></li>
        <li onclick="actualPicSwap()" <img src="picFold/Pic13.jpg" >Pizza Salami 5,90€  - <span class="listenBildKonfig">Bild</span></li>
        <li onclick="actualPicSwap()" <img src="picFold/Pic13.jpg">Pizza Cardinale 5,90€ - <span class="listenBildKonfig">Bild</span></li>
    </ul>
</li>    
<img id="menupic"src="picFold/actualPic.jpg" alt="Foto der Men&uumlliste">
<script>
function actualPicSwap()
{
document.getElementById("menupic").src = ??? ;
}
</script>
</body>
</html>

If:

??? = "picFold/Pic13.jpg" // works but, i want a function which i can add to each li item
??? = jQuery(this).find("src"); // doesnt work
??? = document.getElementByTagName("src") // doesnt work

                    Any Suggestions ?
Edited by Latrell_vie
  • 2 Contributors
  • 2 Replies
  • 277 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by Latrell_vie

Dani AI

Generated

Nice and simple repair by — passing the image path into a handler is a perfectly valid quick fix. was also right: a plain LI has no src attribute, so you either read an IMG inside the LI or attach the path as data on the LI itself. Below are safer, more maintainable alternatives that avoid inline handlers, improve accessibility, and make it easy to change images later.

Use data attributes and handle selection with the jQuery UI menu select callback so behavior stays separate from markup:

// give each LI a data-img="images/pizza13.jpg"
$('#menu').menu({
  select: function(event, ui) {
    var src = $(ui.item).data('img');
    if (src) $('#menupic').attr('src', src);
  }
});

If you’re not using the menu widget, use delegated click handling (works for dynamically added items):

$(document).on('click', '#menu li[data-img]', function(e) {
  e.preventDefault();
  $('#menupic').attr('src', $(this).data('img'));
});

Preload images to avoid flicker when swapping:

$('#menu li[data-img]').each(function(){
  var img = new Image();
  img.src = $(this).data('img');
});

Notes and troubleshooting

  • Fix malformed markup: ensure each tag is properly opened/closed (the original LI/IMG fragments looked broken).
  • Check paths relative to the HTML page; open an image URL directly if it won’t load.
  • Add alt to the large image and set width/height to reduce layout shift.
  • Prefer semantic controls (anchors or buttons) or ARIA roles for keyboard access.
  • If you keep thumbnails inside each LI, read their src (or a data-img) in the handler instead of relying on inline JS.

These changes keep markup clean, make the swap logic reusable, and avoid fragile inline event wiring.

Recommended Answers

All 2 Replies

Member Avatar for Member #120589

Your problem is that the li tag does not have a src child tag (<src>). In order to get it to work with jQ maybe soemthing like this:

$(this).find('img').attr('src','...');
Member Avatar for Latrell_vie

solved it this way:

.......
<li>Pizzen
    <ul>
        <li onclick="actualPicSwap('picFold/Pic13.jpg')">Pizza Mageritha  4,90€ - <span class="listenBildKonfig">Bild</span></li>
        <li onclick="actualPicSwap('picFold/Pic11.jpg')">Pizza Cardinale 5,90€ - <span class="listenBildKonfig">Bild</span></li>
        .......
    </ul>
</li>
..........

<img id="menupic"src="picFold/actualPic.jpg" alt="Foto der Men&uumlliste">
<script>
function actualPicSwap(menuelistImage)
{
    document.getElementById("menupic").src = menuelistImage; 
}

</script>

Voila !!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.