Member Avatar for unau2k

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
  • 382 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by AleMonteiro
Member Avatar for rotten69

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

Edited by rotten69
Member Avatar for AleMonteiro

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