Loading content into a div

Question

I am trying to create a page with images that upon a user hovering loads content into a div on the same page. So far, I have created the html file and the stylesheet. It's a fairly simple, table-based page, with three images that have the css hover effect on them and link to three different pages. My challenge is figuring out how to load content into the div. I am completely new to Javascript so this is going to be quite the learning curve I imagine but any help will be appreciated. I have attached an image to illustrate what I am trying to do. Thanks everyone ![page description ]1

Updated question. Thanks for your input everybody. (Back from the holidays - will be going over suggestions)

My css code:

.Image1{
background-image:url('Image1_REG.jpg'); 
height:86px;
width:86px;
display: block;
}

.Image1:hover {
background-image:url('Image1_Shadow.jpg');
height:86px;
width:86px;
display:block;
}

.Image2{
background-image:url('Image2_REG.jpg'); 
height:86px;
width:86px;
display: block;
}

.Image2:hover {
background-image:url('Image2_Shadow.jpg');
height:86px;
width:86px;
display:block;
}

.Image3{
background-image:url('Image3_REG.jpg'); 
height:86px;
width:86px;
display: block;
}

.Image3:hover {
background-image:url('Image3_Shadow.jpg');
height:86px;
width:86px;
display:block;
}

#contentDiv{
height:150px;
width:350px;
left:50px;
top:150px;
position:absolute;
background-color:#452835;}

table {
width:600px;
height:auto;
column-width:200px;
left:150px;
top:150px;
}



<!DOCTYPE html>
<html lang="en">
  <head>
   <link rel="stylesheet" type="text/css" href="newStyle.css"></link>
  </head>
  <body>
  <body>
  <table>
  <tbody>
  <tr><img src="header.jpg" align ="center" /></tr>
    <tr>
      <td><a class="Image1" href="http://link1" target="_blank"></a>
</td>
      <td>
      <a class="Image2" href="http://link2" target="_blank"></a>
      </td>
      <td><a class="Image3" href="http://link3" target="_blank"></a></td>
    </tr>
  </tbody>
</table>
<div id="contentDetails">Where the hover text is to be displayed</div>
 </body>
</html>

Please post a bit of your code to show us what you have now. — JD Davis, Nov 24 '15 at 20:22
If you use jquery just bind hover event and `jquery $.load` to place contents of html into the div. This is too easy to do for you. — The Muffin Man, Nov 24 '15 at 20:25
if you are using jquery, $('#img1'). hover(function(){$('#contentDiv').text("content for text 1")}; — tanjir, Nov 24 '15 at 20:25
^ at least post your html so that we can make assumptions and suggestions — Ben Sewards, Nov 24 '15 at 20:30
I have edited my comment with my existing code. Apologies for posting my question in a hurry without my code. thank you all for your help. — Princess Toadstool, Nov 30 '15 at 21:38

score 2 · Answer 1 · edited May 23 '17 at 11:52

You'll need a small bit of JavaScript but nothing you can't learn in half an hour. I'd advise you read the MDN JS primer but only to get a grasp for how JS works.

In essence you need to locate the element you want to hover over and then have multiple <div>s on your page containing your content. You add a JavaScript mouseover event on the elements you want to hover over and in the callback function you supply to it you tell it to hide all the divs and then display only the div you want.

I think you should be able to work out everything from these pages:

Best of luck with it. If you're stuck once you've written some code feel free to edit your question and comment on mine (so I know to take a look) and I'll try help.

Ben Sewards · Answer 2 · 2015-11-24T20:49:59.857

Here's a very basic example I created that will help get you started:

JS Fiddle: http://jsfiddle.net/dvav1gdo/5/

HTML

<div class="module">
    <div class="tabs">
        <div class="tab">
            <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">
        </div>
        <div class="tab">
            <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">
        </div>
        <div class="tab">
            <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">
        </div>
    </div>
    <div class="tab-panels">
        <div class="tab-panel active">
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit unde inventore, aliquam architecto minus minima quis. Aliquid voluptates, dolorum ullam dicta nesciunt molestiae maiores! Ratione quasi officia recusandae laboriosam nihil voluptate perferendis fugiat quae provident aliquam harum id tenetur quisquam, ab repellendus suscipit eligendi temporibus facilis sapiente a veniam voluptatibus quidem in voluptatum vero. Soluta excepturi quisquam, sed, quas rem aperiam atque obcaecati nulla repellendus corporis? Consequatur aut quidem, earum enim asperiores. Libero deserunt dignissimos blanditiis est, repellendus qui molestiae tenetur quas assumenda officiis modi totam, quae ullam. Quaerat officiis tempora molestias voluptatibus sint quo incidunt nostrum quisquam sed excepturi?</p>
            </div>
        </div>
        <div class="tab-panel">
            <div class="content">
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
        <div class="tab-panel">
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error fugit harum voluptates. Deserunt adipisci libero incidunt nostrum similique laborum dicta, porro natus harum odit, voluptatum vitae, minima iure omnis. Odit, nemo incidunt voluptas placeat est quis ab dolor. Iure, corporis.</p>
            </div>
        </div>
    </div>
</div>

CSS

.tab {
    display: inline-block;
}

.tab-panel {
    display: none;

    &.active {
        display: block;
    }
}

jQuery

$(document).ready(function () {

    var $tabs = $('.tab');
    var $panels = $('.tab-panel')

    // attach js event handler to all tab jQuery objects
    $tabs.on('mouseover', function() {
        var $this = $(this);
        // get hover index
        var hindex = $this.index();

        // use the active class to show and hide correct panel based on current hover index
        $panels.removeClass('active');
        $panels.eq(hindex).addClass('active');
    });
});

score 0 · Answer 3 · edited May 23 '17 at 12:23

You could use the hover or click function to detect interaction with the image then you use the div id/name to change the text with query i believe its should be $("").text("Some info") example:

<div style="height:100px; width:100px" class="title"> //*
    first text
</div>

The code that you need in order to change the text in the div which his class name is "title" (SEE comment "//*" above):

$('div.title').text('Some info');

Also See for more information "Use jquery to set value of div tag":

Use jquery to set value of div tag

LINKS:

http://api.jquery.com/text/

http://api.jquery.com/hover/

http://api.jquery.com/click/

Also you can use @tanjir 's code as example:

$('#img1').hover(function(){
     $('#contentDiv').text("content for text 1")
};

Remember that

$('#img1'). hover(function(){
  // CODE EXECUTE HERE AFTER HOVER OF IMAGE 1
}

*** this example has # in the start because he use the id of the div instead of the class name! so it would look like:

<div ID="img1">
</div>

Is a listener that wait you to hover, when you will hover the code where the comment is will execute.

sorry to sound so lost but i am trying to put in my code. however, there seems to be a character limit. how do i get around that? — Princess Toadstool, Nov 25 '15 at 15:34
Just edit your question and put the code in the end of your question and tag my name like this '@DeBanana' — BananaBuisness, Nov 25 '15 at 15:35
Remember before you send the code to mark it and select the {} icon — BananaBuisness, Nov 25 '15 at 15:43

Loading content into a div

3 Answers3