1,105,644 Community Members

Changing an image with javascript/jquery

Member Avatar
unau2k
Newbie Poster
1 post since Dec 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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>
Member Avatar
rotten69
Master Poster
747 posts since May 2011
Reputation Points: 20 [?]
Q&As Helped to Solve: 45 [?]
Skill Endorsements: 15 [?]
 
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..

Member Avatar
AleMonteiro
Master Poster
758 posts since Aug 2010
Reputation Points: 115 [?]
Q&As Helped to Solve: 143 [?]
Skill Endorsements: 29 [?]
 
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 three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: