I am hoping to use an image of a map that is divided up by regions as a way to click on a region and it takes you to a page of locations within that region. I tried to divide the image up and making the rest transparent but the whole thing is still clickable. Does anyone know a way that I would be able to achieve this?
This is what the whole image of the map looks like
You can do this without any SVG or JavaScript just using the HTML <map> tag.
Allows you to define clickable regions in the image and associate a link to each.
Ok I left a few comments under your post but I think I can provide a quality answer to close this out.
Take your image and either move it to photoshop/gimp/etc. and convert it to an svg. This will allow you to create each path (country, county, however you want to break it down) and you can export as svg with the path names as the layer names you gave them.
You may not be a photoshop expert...Neither am I. I took your image and pasted it into VectorMagic.com and it was a little big but after a minute it had converted it to an svg for me.
Once you have your SVG it can be placed in the html with the <svg> tag.
You can then give each path a className or id so that you can target it with css. You may have to read up a tiny bit on how to target svg paths with css but its pretty easy.
You can add color change on hover, fade on click, what ever you want to add is possible.
To make sure I'm answering the question you asked. If the whole image is clickable if its an SVG, you are targeting the <svg> when you should be targeting the <path> tags that are children of the svg.
Lemme know if I can answer any questions. This is definitely something everyone doing design should at least play around with because its fun and rewarding when you get it to work the way you intend it to.
I once had a similar issue and used a js library called raphael.js which uses paths to render a dynamic svg and provide interactivity
I struggled to find any current refs to this but here is a tutorial
https://webdesignerwall.com/tutorials/interactive-world-javascript-map
https://cmsdk.com/jquery-plugins/building-an-interactive-map-with-raphael.html
sample I quickly knocked together
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Building an interactive map with Raphael</title>
</head>
<body>
<div class="wrapper">
<div id="map"></div>
</div>
</body>
</html>
https://codepen.io/bar8s/pen/abEBWYx
Related
I am beginning a landing page for a client. I have made it responsive, but when I open it up on a mobile phone, it pops up large and cuts off the page. I have to pinch the screen and zoom out in order to get the full content. How can I code it to where it is already just 100% there without having to zoom out?
Whether use CSS Media Queries or Boostrap framework which will provide you with predefined classes to add to your HTML elements in order for them to adapt on different screen sizes.
Double check that you haven't hard-coded widths for any images, divs or other elements on the page. Instead use relative sizes when you can, eg width: 50vw; . Setting max-widths is sometimes necessary as well, eg max-width:100%;
As per the earlier suggestion from Blueware, media queries will help you set styles based on the viewport or window size.
Also check that you have included a viewport meta tag in the head of your page:
<head>
....
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
If still no joy, post some code or a URL.
Good luck!
I have in my Salesforce"Account" object a rich text field to save images. When I tried to set its size I'm not able to do that. But if I add text content within it the styling is working perfectly with my text content. Only my image is not responding to the style given for it. I have given my code below.Can anyone figure out what's wrong with the code?
<html>
<head>
<style type="text/css">
myDiv
{
border:0px;
height:50px;
width:10px;
}
</style>
</head>
<body>
<div id="myDiv">Picture {!Picture__c}</div>
</body>
</html>
Thanks
Aruna V
It's not possible to resize an image with CSS so go for alternate methods.
For an working method refer here.
At http://sallymilo.com/aem/, when I move my browser narrower, this template narrows to one column as I want. On my phone, however, I'm just seeing the whole template on one screen. I'm quite new to responsive design, so I must be missing something obvious to those of you who know better than I. Please advise.
It's an easy fix, you need to have a viewport meta tag in the head of your page, without this the default behaviour of mobile devices is to scale your page to fit the screen.
Here's a starting suggestion:
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
https://css-tricks.com/snippets/html/responsive-meta-tag/ has more details on some of the properties you can set within the meta tag.
I am trying to use navigation images on left as well right of <super-navbar> but it is stated in the official documentation, that only text is supported in super-navbar buttons. But there must be some way around to do this. Below is my code, where I want to place images instead of text:
<super-navbar>
<super-navbar-button side="left" id="hamburger" onclick="supersonic.ui.drawers.open()">Menu</super-navbar-button>
<super-navbar-title>MyApp</super-navbar-title>
<super-navbar-button side="right">Search</super-navbar-button>
</super-navbar>
Instead of "menu" text I want to have hamburger type icon or png image at least. Same for search text.
Thanks.
This can be accomplished right now by removing the <super-navbar> section and writing your own html header.
If you look in the layout file for your project there is an import statement as you mentioned:
<link rel="import" href="/components/supersonic/components/import.html">
There is a section that states:
* #name super-navbar-button
* When used inside theelement, creates a button that will be displayed on the navigation bar. Only text content is supported for the button title.
Support for icons has been requested. You can subscribe to their github to get notifications of issues. https://github.com/AppGyver/steroids
One work around to be able to keep using <super-navbar> and have icons is to use something like this which will render as ≡
<super-navbar-button ng-click="toggleMenuDrawer()">
≡
</super-navbar-button>
They have a good forum on Muut as well. This issue is most likely related to trying to add icons in the <super-navbar>. I experienced a disappearing navbar after trying to add markup: <i class="icon super-search"></i>
It works in the main content area, but makes the navbar behave differently when nested in a <super> element.
i want to make a text, that changes in a loop, with a fade between the changes. I dont no javascript so im not able to make it on my own, i tried to google it with no luck. maybe im just search for the wrong thing but nothing pops up.
Heres a page where they use it right under the banner picture:http://www.spabad.dk
No using javascript means you want to do this in pure CSS. It could be difficult to get the exact result that you want, although you can find effects close to what you need : See here.
If you are ok with using javascript, this is what you're looking for (note that jquery was included, this is a javascript library that simplifies its use. You can easily include it in an html page by putting <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> in your <head>
Hope that helps!
Sources: Simple CSS Animation Loop – Fading In & Out "Loading" Text and
How to make this jQuery animation code loop forever?