Home/ Questions/Q 8680713
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T21:19:09+00:00

I don’t know anything about jquery so yeah. I just want so that when

  • 0

I don’t know anything about jquery so yeah. I just want so that when you click the “image-url” divs they set the “src: component to the img tag and have the image appear upon clicking. Really appreciate the help.

the 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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CIS 230 Fall 2012</title>
<link rel="stylesheet" type="text/css" href="midterm.css" />
<script type="text/javascript" src="labs/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('div.image-url').click(function() {
        $("#image").attr("src", $(this).attr("val"));
        $("#image").attr("hidden", "false");
    });
})();

function imageload(ls) {
    document.getElementById("image").src = "../images/" + ls;
}
</script>
</head>
<body>
<div id="header"><div style="float:left; width:40%;"></div><div style="float:right;"></div><h1 class="title">CIS 230</h1>
</div>
<div id="content">
  <div id="links">
    <div id="link-holder">
        <h3>Labs:</h3>
        <a href="labs/xhtml1.html"><div class="url">xhtml 1</div></a>
        <a href="labs/csslab1.html"><div class="url" onmouseover="hover(this)" onmouseout="leave(this)">css lab 1</div></a>
        <a href="labs/csslab2.html"><div class="url" onmouseover="hover(this)" onmouseout="leave(this)">css lab 2</div></a>
        <a href="labs/csslab3.html"><div class="url">css lab 3</div></a>
        <a href="labs/csslab4.html"><div class="url">css lab 4</div></a>
        <a href="author.html"><div class="url">author page</div></a>
        <a href="labs/dogfish.html"><div class="url">dog fish</div></a>
        <a href="labs/corners.html"><div class="url">rounded corners</div></a>
        <a href="labs/columns.html"><div class="url">div columns</div></a>
        <h3>Images:</h3>
        <div id="image-link-holder">
            <div class="image-url" val="me.jpg">Beautiful Me</div> //so they click this
            <div class="image-url" val="monster.jpg">Godzilla</div>
            <div class="image-url" val="bandw.jpg">Black and White</div>
            <div class="image-url" val="duocolor.jpg">DuoColor</div>
            <div class="image-url" val="washed.jpg">"Washed" Look</div>
            <div class="image-url" val="fade.jpg">Faded</div>
        </div>
    </div>
    <div id="image-holder" style="min-width:400px; background-color:#000000;" hidden="true">
        <img id="image" src="" alt="No Image Specified" /> //and my mug shot will appear hopefully
    </div>
    <div id="links-spacer1" style="min-width:400px; min-height:300px"></div>
  </div>
  <div id="about">
    <h1>Web Design and Development:</h1>
    <h2>We cover a lot of things:</h2>
    <p>We first review basic HTML and cover CSS styles</p>
    <p>Labs made:
    <ul>
        <li>css lab 1</li>
        <li>css lab 2</li>
        <li>css lab 3</li>
        <li>css lab 4</li>
    </ul>
    </p>
    <p>Once we have the basics down we can cover some more advanced styling. Especially using the &amp<div></div>&amp; tags
    </p>
    <p>Labs made:
    <ul>
        <li>sunny.html</li>
        <li>dogfish</li>
        <li>columns</li>
    </ul>
    </p>
    <p>Then We move onto the graphical component of web design, where we mess around with photoshop</p>
    <p>Labs made:
    <ul>
        <li>monster.jpg</li>
        <li>duocolor.jpg</li>
        <li>other stuff...</li>
    </ul>
    </p>
  </div>
</div>
<div id="footer">
<p id="disclaimer">This webpage is the work of a student. It is not associated with the <a href="www.sunyocc.edu">SUNY Onondaga Community College.</a> The author of this web page is Jason Dancks, and generated with Dreamweaver. If you think this asshole might have stolen your intellectual property, <a href="mailto:jddancks@yahoo.com">email him</a> or contact his <a href="mailto:stedmant@sunyocc.edu">professor</a> or call him at: (315) 498- 2326</p>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You want to take the value of attribute “val” for the image you click, and replace the ‘src’ attribute of the img tag with class “image” with the value: here’s how you do that.

    $('.image-url').on('click', function(){
   var img_url = $(this).attr('val');
   $('#image').attr('src', '/images/' + img_url).parent().attribute('hidden', false);
});

    Happy coding! 🙂

    • 0