Member Avatar for Asan23

im trying to do a mouse over and a onclick swap imag and i cant seem to get the code right and working

here is my html code

<!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>assignment 2 cis 154</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="jsfile.js" rel="stylesheet" type="text/javascript" />

<script src="jsfile"></script>

<script>
    $(document).ready(function(){

    }); //end ready
</script>

</head>

<body>

<h1 onclick="imgover">Greatest Movies Of All Time</h1>

    <p id="image"><img src="Images/superman_super.jpg" width="281" height="140" alt="superman shield" name="superman_super" />
    </p>

<br />
<br />

    <ul id="movielist">
<li><a href="http://www.imdb.com/title/tt0078346/" title="Superman IMDB" target="_blank">Superman Trilogy</a></li>
        <li><a href="http://www.imdb.com/title/tt0076759/" title="Star Wars IMDB" target="_blank">Star Wars Trilogy</a></li>
        <li><a href="http://www.imdb.com/title/tt1119646/" title="Hangover IMDB" target="_blank">HangOver</a></li>
</ul>
<br />
<br />

<p id="moviesum">
   <strong>Superman:</strong><br />
   An alien orphan is sent from his dying planet to Earth, where he grows up to become his adoptive home's first and greatest super-hero.
<br />
<br />
      <strong>Star Wars:</strong><br />
Two Jedi Knights escape a hostile blockade to find allies and come across a young boy who may bring balance to the Force, but the long dormant Sith resurface to reclaim their old glory. Ten years later, Anakin Skywalker shares a forbidden romance with Padmé, while Obi-Wan investigates an assassination attempt on the Princess and discovers a secret clone army crafted for the Jedi. After three years of fighting in the Clone Wars, Anakin Skywalker falls prey to the Sith Lord's lies and makes an enemy of the Jedi and those he loves, concluding his journey to the Dark Side. Luke Skywalker, a spirited farm boy, joins rebel forces to save Princess Leia from the evil Darth Vader, and the galaxy from the Empire's planet-destroying Death Star.
<br />
<br />
      <strong>HangOver:</strong><br />
A Las Vegas-set comedy centered around three groomsmen who lose their about-to-be-wed buddy during their drunken misadventures, then must retrace their steps in order to find him.
<br />

</p>



</body>
</html>

here is my javascript

// JavaScript Document

$(document).ready(function(){

    $("#movielist").onmouseover(function(){
        $(this).css("background-color","#000000");
        }); //end mouseover

    $("#movielist").onmouseout(function(){
        $(this).css("background-color","#ffffff");
        }); // end mouseout

    $("#moviesum").mouseover(function(){
        $("#moviesum#").css("color","#000000");
        }); // end mouseover

    $("moviesum").mouseout(function(){
        $("#moviesum").css("background-color","#ffffff");
        }); // end mouseout
}); //end ready


// click on <h1> load image try 1
superman_super = new Image()
superman_super.src = "superman_super.jpeg"

onClick="javascript:void(document.River = superman_super.src)"



// click on <h1> load image try 2
superman_super = "on.jpeg"  
starwars = "off.jpeg"

function imgover(superman_super){
     superman_super.src = superman_super
}

function imgout(starwars){
     starwars.src = starwars
}

and thoughs of whats wrong is it my <link> or is it the jsfile that is wrong

  • 2 Contributors
  • 4 Replies
  • 779 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by radow
Member Avatar for radow

For change a image hover use following code

$(document).ready(function(){
    $("dsd").hover(
        function()
        {
            $(this).attr("src","on.jpeg");
        },
        function()
        {
            $(this).attr("src","off.jpeg");
        }
    );
    })
Member Avatar for Asan23

ithanks for you how radow. i was able to get the mousover to work. i am still having trouble loading it from and external js file two i still havent figured out how to swap and image on my html page when i click on the text. this is what i have so far i dont know which is right on to use

html section

<h1 onclick="click">Greatest Movies Of All Time</a></h1>

<p id="image"><img src="superman_super.jpg" width="244" height="121" alt="superman shield" />
    </p>

this is my js file

        $("h1").click(function(){
                $(this).attr(src="superman_super","on.jpeg");
                $(img).show();
            },
        function(){
                $(this).attr(src="starwars","off.jpeg");
                $(img).hide();
                });

i want to be able to click on "greatest movies of all time" and swap out the image i have on my webpage

is that possible

Member Avatar for Asan23

also code below what i found googling swaping and image

// click on <h1> load image try 1
superman_super = new Image()
superman_super.src = "superman_super.jpeg"

onClick="javascript:void(document.River = superman_super.src)"



// click on <h1> load image try 2
superman_super = "on.jpeg"  
starwars = "off.jpeg"

function imgover(superman_super){
     superman_super.src = superman_super
}

function imgout(starwars){
     starwars.src = starwars
}
Member Avatar for radow

For to change image a ckick you can use following code

<h1 id="show_movie" onclick="click">Greatest Movies Of All Time</a></h1>
<p id="image">
    <img id="swap_img" src="superman_super.jpg" width="244" height="121" alt="superman shield" />
</p>



<script type="text/javascript">
    var movie_aimgs = ["superman_super.jpg","dsadada.png","123.png"];
</script>
<script type="text/javascript">
$(document).ready(function()
{
    $("#show_movie").click(function()
    {

        var curIndex = movie_aimgs.indexOf($("#swap_img").attr("src"));

        if((curIndex+1)>=movie_aimgs.length)
        {
            curIndex = -1;
        }

        $("#swap_img").attr("src", movie_aimgs[curIndex+1]);
    });
})          

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