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
  • 261 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by Latrell_vie
Member Avatar for diafol

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.