1.11M Members

Changing an image with javascript/jquery

 
0
 

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>
 
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..

 
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>
You
This article has been dead for over six months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: