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;
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>
<link rel=’stylesheet’ type=’text/css’ href=’http://visual.ly/embeder/style.css’ />
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…
The links work and everything! Now I just have to remember what I’ve done and repeat it for all of my other screenshots!