Coding rollovers.

In my last post I mentioned that the info graphics on my ‘top 10’ page that I’d sourced from visual.ly had their own code. This meant that they also came with their own rollover with links allowing the user to visit the original or expand the info graphic. The ones from visual.ly look like this;

Screen Shot 2013-06-25 at 20.07.16

I really want the page to have continuity. Therefore I need the rest of my images to have the same rollover. This is what I’ve been working on this evening. I’ve managed to find the bit of code that is responsible for these rollovers…it looks like this;

<div class=’visually_embed’ data-category=’Science’ rel=’infographic’><img class=’visually_embed_infographic’ src= ‘../../Desktop/Screen Shot 2013-06-24 at 23.07.40.png’ rel=’http://thumbnails.visually.netdna-cdn.com/protect-the-future-of-fish_517a88c82d260.jpg‘ alt=’Protect the Future of Fish’ />
<a id=’visually_embed_view_more’ target=’_blank’ href=’http://visual.ly/protect-future-fish?utm_source=visually_embed’></a&gt;
<link rel=’stylesheet’ type=’text/css’ href=’http://visual.ly/embeder/style.css&#8217; />
<script type=’text/javascript’ src=’http://visual.ly/embeder/embed.js’></script&gt;
</div></div>

The bit of code in bold is the section that I have to change to a link of my own screenshot. Now when you rollover my screenshot of the future of fish info graphic the user sees this…

Screen Shot 2013-06-25 at 20.17.10

The links work and everything! Now I just have to remember what I’ve done and repeat it for all of my other screenshots!

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s