Hover Info

The web team has come up with some styling to use if you want to feature a one-liner amount of information when you hover over an image. An example can be found on the event production page.

By default, the width of the display box is 334px, and the height is 124px. Please take this into account when choosing your images.

 
First, when you are laying out your design in the content area of WordPress, you want to make sure you lay it out like so:
<div class="superContainer">
<div class="imgContainer" id="theJoke">
<div class="BG">
<h3 class="hoverInfoText">Orion's Belt is a Huge Waist of Space</h3>
</div>
<div class="imgChange"></div>
</div>
</div>

Everything in that block of code should stay the same, except for the id and the information inside of the h3. Feel free create as many imgContainer divs as you need within the superContainer, but each id should be unique.

 
At the very bottom of your content editing area, you will need to declare what information will be filling the imgContainer. Put it in script tags, and follow this basic structure:
<!-- noformat on -->
<script>
var hoverInfo = {
"theJoke": ["Terrible joke, only 3 stars", "Orion's Belt is a Huge Waist of Space", "https://apod.nasa.gov/apod/image/1603/OrionTeide_Tejedor_2263.jpg"]
};
</script>
<script src="https://dixie.edu/wp-content/themes/dixie-s15/js/extras/hover-info.js"></script>
<!-- noformat off -->

 
The structure for hoverInfo is {“id”: [“text-show-up-on-hover”, “original-text”, “image-link”]}. If you make more than one imgContainer div, it will look something like this:
<!-- noformat on -->
<script>
var hoverInfo = {
"theJoke": ["Terrible joke, only 3 stars", "Orion's Belt is a Huge Waist of Space", "https://upload.wikimedia.org/wikipedia/commons/1/10/Orion_Belt_2009-01-29.jpg"],
"funnyJoke": ["Plagiarism.", "I made up my very own word today...", "https://static.pexels.com/photos/210661/pexels-photo-210661.jpeg"],
"thirdJoke": ["Comes great response ability.", "With Great Reflexes", "https://upload.wikimedia.org/wikipedia/commons/4/47/Papillon_dog_agility_jump.jpg"]
};
</script>
<script src="https://dixie.edu/wp-content/themes/dixie-s15/js/extras/hover-info.js"></script>
<!-- noformat off -->

Remember to include the second script with the source, as that will pull and run the reusable javascript.

 
When previewing your page, it should look like this:

Orion’s Belt is a Huge Waist of Space

I made up my very own word today…

With Great Reflexes

How do stellar objects plan a party?