Skip to main content
Static and Motion Studio
Static and Motion Studio
Participating Frequently
October 18, 2018
Answered

hyperlinking .gifs

  • October 18, 2018
  • 1 reply
  • 700 views

Hello, I asked a similar question before which eventually became "answered", but didn't answer the question completely,

so pardon the redundancy.

I have a home page, which is comprised of four .gifs and a background. The home page in the construction of the site

is one .gif in order to use the four .gifs and a background.

I'd like to have a drop down menu, on the home page, using three, short parallel lines (universal for drop down?) as the

button for menu. Menu will have links to four other pages. On each of those pages would be a graphic background (jpeg),

and I'd like to have 12 .gifs, each hyperlinked to their own videos (.mov) which I'd like to play on the same page with

playback/volume control.

To the great minds out there, is it possible? Thanks. Cheers!

    This topic has been closed for replies.
    Correct answer Nancy OShea

    If you can work with code, everything on your wish list is possible.  But you might want to rethink a few things first.

    What you want is called a Hamburger Menu.   

    Creating a Hamburger Menu with HTML, CSS and jQuery

    Image result for Hamburger menu

    4 GIFS is not a web page.  If there's no actual text on your site, you might as well not have a site.  Search engines don't index images.  Nobody will find you in web searches.  Nobody will be able to translate your content.   In other words, without real text, you won't exist.  

    My chosen web graphics in order of preference are:

    1. Scalable Vector Graphics (SVG),
    2. web fonts like Glyphicons or Font Awesome,
    3. JPG  (photos),
    4. PNG with alpha-transparency. 

    I never use GIFs anymore except when I need an animation which is kind of rare.

    MOV files are not natively supported by all browsers and mobile devices.  On the web you should be using MP4 videos.

    The <video> tag supports player controls and poster images. 

    <video controls poster="Your_Poster_image.jpg" src="Your_Video.mp4" media/type="mp4">

    </video>

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    October 18, 2018

    If you can work with code, everything on your wish list is possible.  But you might want to rethink a few things first.

    What you want is called a Hamburger Menu.   

    Creating a Hamburger Menu with HTML, CSS and jQuery

    Image result for Hamburger menu

    4 GIFS is not a web page.  If there's no actual text on your site, you might as well not have a site.  Search engines don't index images.  Nobody will find you in web searches.  Nobody will be able to translate your content.   In other words, without real text, you won't exist.  

    My chosen web graphics in order of preference are:

    1. Scalable Vector Graphics (SVG),
    2. web fonts like Glyphicons or Font Awesome,
    3. JPG  (photos),
    4. PNG with alpha-transparency. 

    I never use GIFs anymore except when I need an animation which is kind of rare.

    MOV files are not natively supported by all browsers and mobile devices.  On the web you should be using MP4 videos.

    The <video> tag supports player controls and poster images. 

    <video controls poster="Your_Poster_image.jpg" src="Your_Video.mp4" media/type="mp4">

    </video>

    Nancy O'Shea— Product User & Community Expert
    Static and Motion Studio
    Static and Motion StudioAuthor
    Participating Frequently
    October 20, 2018

    Thank you Nancy. Based on your reply its obvious I didn't properly explain a few details.

    My site will have text. The "hamburger" menu will indicate the four types of work I will have

    pages associated with/hyperlinked to. However my site will have a minimum of text, as the

    focus is on my videos to highlight my work.

    The home page incorporates a jpeg background with what are four .gifs, which are 15 second looped videos.

    I created this in After Effects, then using Adobe Media Encoder created a single .gif. That's as far

    as I've got so far, and it's on the web and working fine with all devices I've tried it on.

    I concur with you about using .mp4's. Instead of my videos being viewed on Vimeo or You Tube

    I'd rather they play from my sight.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    October 20, 2018

    In case you don't know, Adobe Portfolio comes free with your Creative Cloud plan.   No web hosting or coding skills required.   Basically, you choose a layout theme.  Upload some images, video, etc.... add some text describing your work. When  done, hit the Publish button.  That's all there is to it.  And Portfolio ties in seamlessly with Behance -- another venue for creatives.

    Adobe Portfolio | Build your own personalized website

    Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices