Skip to main content
S
Simon Roughan
Participant
November 10, 2021
Question

Complete Noob Question about Hotspots

  • November 10, 2021
  • 2 replies
  • 402 views

Hi everyone. I have a new job that partly entails creating web content. Im a video producer, and dont have much experience with coding etc. I dont need to make a web site or even a page, an external firm handels this, but I need to make elements for web pages and deliver them to this external firm.

For example, Im trying at the moment to make a 600x600 jpg with several hotspots. The hotspot should have a text box animation with the roll over / hover, and then a url link with a click. Im having a problem getting this done with adobe products. I have "360 view product creator" software from Iconasys, that I use to do this at the moment. I just load 1 picture into it and insert hotspots, then export as HTML 5. This works fine, the only thing is you have no control over the look or movement of the text box animation or video player.

Im sure I could get this looking more elegant with adobe cc, but how? Is dreamwaver even the right software for making just a pic with these hotspots?

Any help appreciated...

Thx in Advance,

Simon

 

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 10, 2021

    @Simon Roughan,

    Hotspots on images (aka client-side image maps) are neither responsive nor a suitable approach to modern web design.  Nobody uses this method anymore. 

     

    Internet users have devices of all sizes, ranging from small mobile phones to ultra-wide 4 or 5K displays and everything in between. Experienced web designers know this and can create visually compelling images, text & typography that works well on the web, loads quickly and delivers a good user experience on ALL devices -- ex-sm, sm, md, lg, ex-lg. 

     

    I could be wrong but based on your question, I don't think any of this is within your wheelhouse yet.  I suggest you find a skilled web designer to work with who understands UI/UX and code fundamentals.

     

    Graphics Design vs Web Design

    https://www.weblite.com.my/blog/graphic-design-vs-web-design

     

    ADOBE DESIGN TOOLS:
    - Illustrator CC (vector): https://www.adobe.com/products/illustrator.html
    - Photoshop CC (raster): https://www.adobe.com/products/photoshop.html

    - XD CC (UI/UX): https://www.adobe.com/products/xd.html

     

    CODE TUTORIALS:
    - https://www.w3schools.com/html/
    - https://www.w3schools.com/css/
    - https://www.w3schools.com/js/

     

    Hope that helps.

     

    Nancy O'Shea— Product User & Community Expert
      S
      Simon RoughanAuthor
      Participant
      November 11, 2021

      Thanks heaps for the detailed and researched answer nancy. i appreciate the time it must of taken. I have a solution already, if a little inelegant. Its the old story, why pay a proffesional when you can bodgie it up in-house?

      thx again,

      Simon

        B
        Community Expert
        Ben MCommunity Expert
        Community Expert
        November 10, 2021

        The hotspots are all done in code if you are trying to do them, but it's not easy to do this responsively and if coding is not your specialty, I would hand the image to your vendor and let them work on this. I was able to dig up this example of hotspots using relative positioning to show you what I mean: https://codepen.io/priyansuresh/pen/depYLJ .  Here's a bunch more examples that are styled with CSS as well: https://devsnap.me/css-hotspots .

         

        While DW can offer you a code editor to accomplish this, it's not going to provide a UI-based solution if that is what you are looking for unfortunately.

          S
          Simon RoughanAuthor
          Participant
          November 10, 2021

          Thanks Ben. I had it more or less with Indesign, but the HTML export is a disaster. I spose I'll stick with the Iconasys software then.

          cheers,

          Simon

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices