Changing an image with javascript/jquery

I want to change an image in another place on my site when I click on the page title. I have tried doing different codes five ways to Sunday and cannot figure it out. Can someone help? Here's my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Assignment 2 JavaScript</title>
<link href="styles.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

<script>
$(document).ready(function() {
    $('.hover').mouseover(function(){
        $(this).css('color', 'red');    
        $('.hover').mouseout(function(){
        $(this).css('color', 'black');                        
        });
        $('p').mouseover(function(){
        $(this).css('color', 'orange');                   
        });
        $('p').mouseout(function(){
        $(this).css('color', 'black');                    
    });// for the links

    // var changePic = $('pageTitleBanner').attr('src');

    $('#masthead').mouseover( function() {
        $(this).css('background-color','red');
        })
        .mouseout( function() {
        $(this).css('background-color','black');

        })
        .click( function() { 
         $(this).css('background-color','blue');


        imgs=Array("art.berto-2.jpg","shawnajord.png","caitlynnew.png");
        var x=0;
        function change() {
        document.getElementByName("picImage").src=imgs[++x];
                if (x==3) {
                            x=0;
                            }
        }

        });

        });     


    });// end ready
    </script>


</head>



<body>
    <div id="wrapper">
    <div id="masthead">Page Title</div>
    <div id="wrapForLinks">
        <div class="hover" id="link1">Link 1</div>
        <div class="hover" id="link2">Link 2</div>
        <div class="hover" id="link3">Link 3</div>
      </div>
      <img src="images/art.berto-2.jpg" name="picImage" width="450" height="325" id="picImage">
    <div id="textAreaPara">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae nibh odio. Proin purus massa, posuere vitae tincidunt eget, dapibus eu nibh. Duis ac ligula nec neque mattis commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur aliquam turpis sed tellus commodo volutpat. Maecenas porta elementum neque sed volutpat. Curabitur id ipsum vitae lacus iaculis aliquet vel nec urna. Nullam ipsum urna, tempus eu facilisis sit amet, tempor eu er.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae nibh odio. Proin purus massa, posuere vitae tincidunt eget, dapibus eu nibh. Duis ac ligula nec neque mattis commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur aliquam turpis sed tellus commodo volutpat. Maecenas porta elementum neque sed volutpat. Curabitur id ipsum vitae lacus iaculis aliquet vel nec urna. Nullam ipsum urna, tempus eu facilisis sit amet, tempor eu er</p>
  </div>
  <p> </p>
  <p> </p>
  <br clear="all" />
</div>
</body>
</html>

3

Contributors

2

Replies

13 Hours

Discussion Span

6 Months Ago

Last Updated

3

Views

unau2k

Newbie Poster

1 post since Dec 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

6 Months Ago

0

If I understand your question correctly, you want to change an image that is already displayed on a page when the title is clicked. You're refering to the title tags in head section, right? if yes so, I don't think you can because I have just tried it and unfortunatley, it doesn't work. However, you can still manipualte the title in jQuery or JavaScript easily.

To solve your problem, you might consider adding a button or making an image clickable when it is clicked then an image is changed.

I hope this helps..

rotten69

Master Poster

747 posts since May 2011

Reputation Points: 36

Solved Threads: 47

Skill Endorsements: 13

6 Months Ago

0

Try like this:

var images = ["art.berto-2.jpg","shawnajord.png","caitlynnew.png"];
var x = 0;

$(document).ready(function() {

    $('.hover').mouseover(function(){
        $(this).css('color', 'red');    
        $('.hover').mouseout(function(){
        $(this).css('color', 'black');                        
        });
        $('p').mouseover(function(){
        $(this).css('color', 'orange');                   
        });
        $('p').mouseout(function(){
        $(this).css('color', 'black');                    
    });// for the links

    // var changePic = $('pageTitleBanner').attr('src');

    $('#masthead').mouseover( function() {
        $(this).css('background-color','red');
        })
        .mouseout( function() {
        $(this).css('background-color','black');

        })
        .click( function() { 
            $(this).css('background-color','blue');

            document.getElementByName("picImage").src=images[x++];
            if (x==images.length) {
                x=0;
            }
        }

        });

        });     


    });// end ready
    </script>

AleMonteiro

Master Poster

752 posts since Aug 2010

Reputation Points: 129

Solved Threads: 140

Skill Endorsements: 25

Changing an image with javascript/jquery

This article has been dead for over three months: Start a new discussion instead