Tutorials
Tutorials
HTML (Writing your page)
CSS (Styling your page)
Animating elements on your page:
CSS creates animations through @keyframes and the animation-name property. W3Schools has a page about using these animation functions: W3Schools site.
This is an example of how it can be used with multiple properties:@keyframes animation {
0% {background-color: red; border-radius: 0;}
50% {background-color: red; border-radius: 50%;}
100% {background-color: red; border-radius: 0;}
}
.animate {
animation-name: animation;
animation-duration: 5s;
animation-timing-function: linear; /*ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)*/
animation-iteration-count: infinite;
}
Below are some common ways to animate an element:
- - Transform: translate(n, n); /* n is how much to move it by */
- - Transform: scale(n, n); /* n is how much to scale it by */
- - Transform: rotate(ndeg); /* n is the degree amount to turn */
- - Transform: rotate(ndeg) scale(n, n) translate(n, n); /* Combines multiple transform effects */
Javascript (Interacting with your page)
Themes
Themes
Themes are collections of code that affect a whole site's style, function, and layout. Some are layout-only, relying entirely on CSS and HTML, while some rely heavily on Javascript to create affects like opening windows, image maps, etc.
Themes usually have installation instructions included in their files and on their example page.
Check the 'license' button in the top right (the signed form icon) for more information on the licenses these scripts fall under.
Compatibility
All themes are tested on Firefox and Safari browsers, and on mobile screen sizes. If a theme isn't working on your browser or device, please send a message through the 'contact' button in the top right of the screen. I'll do my best to make it compatible!
Categories
Free Themes || Paid Themes || Operating Systems || StationaryFree Themes
Operating Systems
🪟 Glasspane Mana V1.0
Features
- Automatic desktop and taskbar creation
- Content-responsive header and footer bars
- Easily customisable CSS colours and images
- Draggable and resizable windows
- Multiple windows open at once
- Optional help windows
Based on an older operating system, Glasspane Mana is a website theme that lets creators make their sites more interactive. With resizable windows and multiple being open at once, it encourages one-page websites without making them too long.
Example: HTML pageDownload: Complete .ZIP file
Screenshots
Theme Details
Last Updated: 9th August 2023
Item Name: scTheme_GlasspaneMana
Status: Complete
Type: Theme
Javascript: Required, noscript redirect
Files Included: HTML file, CSS file, Javascript file, placeholder images
Example: Example HTML page
Installation Guide
Usage instructions are included in the example HTML file. To install the theme, download the files individually or download the Complete .ZIP file. Extract all .ZIP files and upload the HTML, CSS, JS, and imgs folder to the same location. If you installed it correctly, the example HTML file will show images and have a taskbar at the bottom.
Stationary
🗀 Folder Files (Manual) V1.0
Features
- Multi-page layout in a single URL
- Multiple tabs without Javascript
- Multiple customisation options for size, colour, and more
- Javascript settings for users to change font and size
- Clickable image plugin included
A theme made for one-page collections of characters, information, art, and more. It's based on manilla folders and old paper collections of information kept in binders.
Example: HTML pageDownload: Complete .ZIP file
Screenshots
Theme Details
Last Updated: 9th November 2023
Item Name: scTheme_FolderFiles
Status: Complete
Type: Theme
Javascript: Not required, noscript warning
Files Included: HTML file, CSS file, JS file, placeholder images
Example: Example HTML page
Installation Guide
Usage instructions are included in the example HTML file. To install the theme, download the files individually or download the Complete .ZIP file. Extract all .ZIP files and upload the HTML, CSS, JS, and imgs folder to the same location. If you installed it correctly, the example HTML file will show images.
Paid Themes
Widgets
Widgets
Widgets are visible and interactive elements that can go on your webpage, such as a collection of buttons or a script that allows you to build a game. Out of the three categories on this page (themes, widgets, and plugins) they require the most input from you to install correctly, since they are usually very complex. Every widget includes an installation guide however, so code can easily be copied or edited with the guide if you're not confident in your coding abilities.
Check the 'license' button in the top right (the signed form icon) for more information on the licenses these scripts fall under.
Compatibility
All widgets are tested on Firefox and Safari browsers, and on mobile. If a widget isn't working on your browser or device, please send a message through the 'contact' button in the top right of the screen. I'll do my best to make it compatible!
Categories
Free Widgets || Paid Widgets || Blogs, Writing, and Updates || Images and GalleriesFree Widgets
Blogs, Writing, and Updates
📰 Blog Pages Widget V1.0
Features
- An interactive post list that automatically generates based on the URLs you provide
- Timestamps included on post links and posts, which can be customised
- A label system that can be used to search through blog posts, by excluding or including posts with those labels
- The ability to limit how many post links show at once, which adds a 'view more posts' button
- An added button to return to your homepage and to link to your RSS feed, and the option to hide them
- The ability to schedule posts, which hides them from the post list and redirects users who try to open the post manually
- Automatic addition of a post's title, time posted, and labels
- Automatic addition of buttons to posts that link to the post before, and after, it.
This widget helps automate a lot of the blog-making process for personal sites, making it far easier to post updates on your website and set up a RSS feed. It also adds more functionality with chronological sorting, labels for filtering, and post scheduling.
Example: Example HTML page || CSS ViewerDownload: Complete .ZIP file
Widget Details
Last Updated: 31st August 2023
Item Name: sc_bpw
Status: Complete
Type: Widget
Javascript: Required, noscript warning
Files Included: HTML files (8), Javascript file, CSS file, placeholder images
Example: Example HTML page || CSS Viewer
Installation Guide
The widget comes with an installation guide as a blog post, you can view it here.
Images and Galleries
🖼 Interactive Map Widget V1.0
Features
- Responsive image map resizing (included plugin)
- Preloading images included in the map (included plugin)
- Image animations when areas are hovered over
- Area maps changing the background and use map, giving the illusion of changing areas
A widget that helps users set up an interactive image map. The map offers hover-on features to change its appearance, being able to link image maps to give the illusion of travelling through a space, and responsive sizing.
Example: Example HTML pageDownload: Complete .ZIP file
Widget Details
Last Updated: 7th August 2023
Item Name: sc_imw
Status: Complete
Type: Widget
Javascript: Required, noscript warning
Files Included: HTML file, Javascript file, placeholder images
Known Errors: On mobile platforms the map can occasionally break due to the touch interface. The widget can disable itself on smaller screens in the .js file to avoid this problem, but refreshing the page will also fix it.
Example: Example HTML page
Installation Guide
- Download the Javascript, HTML example, and placeholder images files from the 'download' tab above. Add them to your neocities site and do not separate them into different folders.
- The following guide will work from the sc_imw_example.html file. If you wish to add it to your own pre-existing page, copy the following code and paste it between your <body> tags:
Reveal Code
<!-- Interactive Image Map Container -->
<div id="sc_imw_container">
<!-- Images for the Map -->
<img id="sc_imw_mappedImage" src="sc_imw_imgs/sc_imw_testingRoom1.png" usemap="#sc_imw_testingRoom1.png" alt="Scribblemakes Code Interactive Image Map Widget">
<noscript>Javascript is disabled. Enable your Javascript to use the interactive map.</noscript>
<!-- First Map (Room 1) -->
<map name="sc_imw_testingRoom1.png">
<area shape="rect" coords="261,202,547,803"
onmouseenter="sc_imw_AreaHover('sc_imw_testingRoomHoverLeft.png')"
href=""
class="sc_imw_MapClass">
<area shape="rect" coords="1370,202,1658,803"
onmouseenter="sc_imw_AreaHover('sc_imw_testingRoomHoverRight.png')"
onclick="sc_imw_changeArea('sc_imw_testingRoom2.png')"
class="sc_imw_MapClass">
</map>
<!-- Second Map (Room 2) -->
<map name="sc_imw_testingRoom2.png">
<area shape="rect" coords="261,202,547,803"
onmouseenter="sc_imw_AreaHover('sc_imw_testingRoomHoverLeft.png')"
onclick="sc_imw_changeArea('sc_imw_testingRoom1.png')"
class="sc_imw_MapClass">
<area shape="rect" coords="820,226,1098,807"
onmouseenter="sc_imw_AreaHover('sc_imw_testingRoom2HoverDoor.png')"
href="https://scribblemakes.com/code/development#sc_imw"
class="sc_imw_MapClass">
<area shape="rect" coords="1370,202,1658,803"
onmouseenter="sc_imw_AreaHover('sc_imw_testingRoomHoverRight.png')"
href=""
class="sc_imw_MapClass">
</map>
</div>
<!-- Link and Button (optional)
<a id="sc_imw_preloadLink">This link text is replaced with sc_imw_impp_starterText if text is missing</a>
<button id="sc_imw_preloadButton">This button text is replaced with sc_imw_impp_starterText if text is missing</button>
-->
<!-- Script to set up images -->
<script src="scWidget_InteractiveImageMap.js" type="text/javascript"></script>
<script>sc_imw_Preload(["sc_imw_imgs/sc_imw_testingRoom1.png", "sc_imw_imgs/sc_imw_testingRoom2.png"]);</script> - If you're using your own page, make sure it's in the same folder as the .js file and images folder.
- When you view the HTML page you should now see the placeholder map and be able to interact with it. The rest of this guide will go over replacing the placeholder images with your own.
- Replace the starting image with your own
- Upload your new starting image into your images folder, where you can see the placeholder .png files, and then open the HTML file.
- All images will need to be kept in the same folder for your map. If you're using an image from another server: download it and upload it to your image map folder (by default this is "sc_imw_imgs", you can change it in the .js file).
- Find the main image tag (by default it has the "sc_imw_mappedImage" id) and change its src property to the image URL you want the map to start on. For example:
<img id="sc_imw_mappedImage" src="sc_imw_imgs/myFirstRoom.png" usemap="#sc_imw_testingRoom1.png" alt="Scribblemakes Code Interactive Image Map Widget"> - Change the main image's usemap property to the name of your image with a # in front of it.
<img id="sc_imw_mappedImage" src="sc_imw_imgs/myFirstRoom.png" usemap="#myFirstRoom.png" alt="Scribblemakes Code Interactive Image Map Widget">Scroll down to your first map and also change its name to your new image.<!-- First Map (Room 1) -->
<map name="myFirstRoom.png"> - Find the script at the bottom of the page and change the code to now load your new background image. To do this, replace the first string (inside the " ") in the array to your image URL:
<!-- Script to set up images -->
<script src="scWidget_InteractiveImageMap.js" type="text/javascript"></script>
<script>sc_imw_Preload(["sc_imw_imgs/myFirstRoom.png", "sc_imw_imgs/sc_imw_testingRoom2.png"]);</script> - If your new image is not 1920px by 1080px in size, you'll need to change some variables in the javascript file. Open 'scWidget_InteractiveImageMap.js' and scroll down to '// Responsive Image Maps Plugin Setup'. Change sc_imw_rimp_originalWidth and sc_imw_rimp_originalHeight to your image's width and height in pixels, respectively. For example, if your new image was 2000px tall and 1000px wide:
// Responsive Image Maps Plugin Setup
var sc_imw_rimp = true; // Set to false to deactivate the built-in Image Map Resizer
const sc_imw_rimp_originalWidth = 1000; // Width of the image without CSS styling (file dimensions, the size it was mapped at)
const sc_imw_rimp_originalHeight = 2000; // Height of the image without CSS styling (file dimensions, the size it was mapped at) - Your map will now start on your new image, and it will be loaded with the rest of the images.
- Add new clickable areas
- Creating clickable areas with the Interactive Map Widget is the same as creating standard HTML image maps. You can read more about making standard HTML image maps here. To start, you'll need a program or site that allows you to see the x and y coordinates of your cursor on top of your image, such as the Paint program offered by Microsoft.
- Upload your image into the program or site and get the coordinates of where you want a space to be clickable. For this guide, the clickable space will be where the doors are. Since that's a rectangular shape, it will only need the top left and bottom right coordinates (which are 261x 202y and 547x 803y).
Write down the coordinates you find for each clickable area, you'll be inputting them into your code later. - Return to your HTML document and delete both maps (not the image or outside the div), your map code should look like this:
<!-- First Map (Room 1) -->
<!-- Second Map (Room 2) --> - Add a map to both the first and second room sections. Your maps' names will need to be the file name of the room, for example: the first map name will be myFirstRoom.png based on the last section of this guide.
<!-- First Map (Room 1) -->
<map name="myFirstRoom.png">
</map>
<!-- Second Map (Room 2) -->
<map name="sc_imw_testingRoom2.png">
</map> - If you have a second image ready that you want to use, upload it to your image folder and rename the second map. Make sure the second image is the same size as your first image or the script will not work.
- Add your area shapes to your maps, including their shape, coords (which you wrote down earlier), and the class 'sc_imw_MapClass'. This guide will use the doors of the placeholder image as the clickable areas, which means room 1 will have two shapes and room 2 will have three.
<!-- First Map (Room 1) -->
<map name="myFirstRoom.png">
<area shape="rect" coords="261,202,547,803"
class="sc_imw_MapClass">
<area shape="rect" coords="1370,202,1658,803"
class="sc_imw_MapClass">
</map>
<!-- Second Map (Room 2) -->
<map name="sc_imw_testingRoom2.png">
<area shape="rect" coords="261,202,547,803"
class="sc_imw_MapClass">
<area shape="rect" coords="820,226,1098,807"
class="sc_imw_MapClass">
<area shape="rect" coords="1370,202,1658,803"
class="sc_imw_MapClass">
</map> - Now you'll add the animations for when the clickable areas are hovered over. This is done by adding a new line to your areas that gives them a 'hover over' event, which then calls a function and the animation image you want to use.
<!-- First Map (Room 1) -->
<map name="myFirstRoom.png">
<area shape="rect" coords="261,202,547,803"
onmouseenter="sc_imw_AreaHover('myFirstRoomAnim1.png')"
class="sc_imw_MapClass">
<area shape="rect" coords="1370,202,1658,803"
onmouseenter="sc_imw_AreaHover('myFirstRoomAnim2.png')"
class="sc_imw_MapClass">
</map>
<!-- Second Map (Room 2) -->
<map name="myFirstRoom.png">
<area shape="rect" coords="261,202,547,803"
onmouseenter="sc_imw_AreaHover('sc_imw_testingRoomHoverLeft.png')"
class="sc_imw_MapClass">
<area shape="rect" coords="820,226,1098,807"
onmouseenter="sc_imw_AreaHover('sc_imw_testingRoom2HoverDoor.png')"
class="sc_imw_MapClass">
<area shape="rect" coords="1370,202,1658,803"
onmouseenter="sc_imw_AreaHover('sc_imw_testingRoomHoverRight.png')"
class="sc_imw_MapClass">
</map> - The function 'sc_imw_AreaHover' is given the image file you want to go on top of your background, such as 'myFirstRoomAnim1.png'. It's recommended to make these images transparent so they only cover the area you want animated, making it easier to add things to your background without needing to change every animation.
- These animations, and the background image, can be any file type (such as gifs and jpgs). However they ALL must be the same dimensions (for example: 1920px by 1080px).
- When you view your page it should now animate when you hover over your clickable areas. The last thing to do with them is to give them a function for when they're clicked on, such as changing to your second room or going to a new URL. This guide will start with adding the URL, which is done with href:
<!-- First Map (Room 1) -->
<map name="myFirstRoom.png">
<area shape="rect" coords="261,202,547,803"
onmouseenter="sc_imw_AreaHover('myFirstRoomAnim1.png')"
href=""
class="sc_imw_MapClass">
<area shape="rect" coords="1370,202,1658,803"
onmouseenter="sc_imw_AreaHover('myFirstRoomAnim2.png')"
class="sc_imw_MapClass">
</map>
<!-- Second Map (Room 2) -->
<map name="sc_imw_testingRoom2.png">
<area shape="rect" coords="261,202,547,803"
onmouseenter="sc_imw_AreaHover('sc_imw_testingRoomHoverLeft.png')"
class="sc_imw_MapClass">
<area shape="rect" coords="820,226,1098,807"
onmouseenter="sc_imw_AreaHover('sc_imw_testingRoom2HoverDoor.png')"
href="https://scribblemakes.com/code/development#sc_imw"
class="sc_imw_MapClass">
<area shape="rect" coords="1370,202,1658,803"
onmouseenter="sc_imw_AreaHover('sc_imw_testingRoomHoverRight.png')"
href=""
class="sc_imw_MapClass">
</map> - If your clickable area should take you to another image, it will need an 'onclick' property that calls the 'sc_imw_changeArea' function. You'll need to give this function the name of the image / map you want it to go to:
<!-- First Map (Room 1) -->
<map name="myFirstRoom.png">
<area shape="rect" coords="261,202,547,803"
onmouseenter="sc_imw_AreaHover('myFirstRoomAnim1.png')"
href=""
class="sc_imw_MapClass">
<area shape="rect" coords="1370,202,1658,803"
onmouseenter="sc_imw_AreaHover('myFirstRoomAnim2.png')"
onclick="sc_imw_changeArea('sc_imw_testingRoom2.png')"
class="sc_imw_MapClass">
</map>
<!-- Second Map (Room 2) -->
<map name="sc_imw_testingRoom2.png">
<area shape="rect" coords="261,202,547,803"
onmouseenter="sc_imw_AreaHover('sc_imw_testingRoomHoverLeft.png')"
onclick="sc_imw_changeArea('myFirstRoom.png')"
class="sc_imw_MapClass">
<area shape="rect" coords="820,226,1098,807"
onmouseenter="sc_imw_AreaHover('sc_imw_testingRoom2HoverDoor.png')"
href="https://scribblemakes.com/code/development#sc_imw"
class="sc_imw_MapClass">
<area shape="rect" coords="1370,202,1658,803"
onmouseenter="sc_imw_AreaHover('sc_imw_testingRoomHoverRight.png')"
href=""
class="sc_imw_MapClass">
</map> - Your clickable areas are now done. You can follow the same process to add new maps or areas for any images you add.
- Add new background images / rooms
- Upload your new background image to your images file, making sure it's the same size as your starting image.
- Open your HTML file and scroll to the bottom where you'll find '<!-- Script to set up images -->' and find the 'sc_imw_Preload' function. You'll need to add your new image into the array:
<!-- Script to set up images -->
<script src="scWidget_InteractiveImageMap.js" type="text/javascript"></script>
<script>sc_imw_Preload(["sc_imw_imgs/sc_imw_testingRoom1.png", "sc_imw_imgs/sc_imw_testingRoom2.png", "sc_imw_imgs/myNewRoom.png"]);</script> - If you're replacing the second placeholder image, remember to remove '"sc_imw_imgs/sc_imw_testingRoom2.png",' from the array and rename your second map.
- Repeat the instructions listed in step 4, this time using it to set up your new image's clickable areas.
- Your image map is now functional and using your own images. You can keep developing it to make a site map, a game, or anything else you can think of. If you'd like to customise it further in the .js file: scroll down inside the .js file until you see '// FILL IN ANY VARIABLES BELOW IF YOU WANT TO CHANGE THEM FROM THE DEFAULT'. You can customise your script from here if you plan to change your image folder or rename your image id. You can also customise the two included plugins to change their appearance, behaviour, and turn them off if needed.
CSS Guide
- #sc_imw_container = Element holding the widget
- #sc_imw_preloadLink = Link used for preloading images if style is 'link'
- #sc_imw_preloadButton = Button used for preloading images if style is 'button'
- .sc_imw_impp_blackout = Element holding the preloading text for the 'blackout' style
Paid Widgets
Plugins
Plugins
Plugins are scripts that affect the pre-existing code on your HTML page, such as adding additional event listeners to elements or dynamically resizing size-restricted functions. Plugins are the easiest to install, usually only requiring one line of code near the bottom of your HTML page to function, and often are only one Javascript file.
Check the 'license' button in the top right (the signed form icon) for more information on the licenses these scripts fall under.
Compatibility
All plugins are tested on Firefox and Safari browsers, and on mobile. If a plugin isn't working on your browser or device, please send a message through the 'contact' button in the top right of the screen. I'll do my best to make it compatible!
Categories
Free Plugins || Paid Plugins || Images and GalleriesFree Plugins
Images and Galleries
🖼 Image Click to Enlarge Plugin V1.0
Features
- Choice of collecting all images on a page or only a selected class
- Choice of giving images a class that forces them to be ignored by the plugin
- Easy customisation of the image viewer's appearance
- Creates a caption from the image's alt, which can be turned off
- Creates a gallery of images users can click through, which can be turned off
- Keyboard-only accessibility included
A plugin that makes images clickable, opening them up at a larger size for easier viewing.
Example: Example HTML pageDownload: .JS file
Plugin Details
Last Updated: 8th August 2023
Item Name: sc_icep
Status: Complete
Type: Plugin
Javascript: Required
Files Included: Javascript file
Example: Example HTML page
Installation Guide
- Install the Javascript file from the 'download' tab above and place it in the same folder as your HTML file. Open your HTML file and place the following code just above the </body> tag:
<script src="scPlugin_ImageClicktoEnlarge.js" type="text/javascript"></script> - You can place it in another folder, but change the src to match its new location. For example: if you place in a folder named 'scripts', which is in the same place as your HTML file, you'd put:
<script src="scripts/scPlugin_ImageClicktoEnlarge.js" type="text/javascript"></script> - If you have images you want the script to ignore, making it so users can't click on them, you can give them the class 'sc_icep_noEnlarge'.
- The plugin is now successfully installed on your HTML page and will run (as long as Javascript is enabled). You will need to copy that line of code to any HTML page you want it to run on. If you want to customise it more, you can open the .js file and scroll down until you see '// FILL IN ANY VARIABLES BELOW IF YOU WANT TO CHANGE THEM FROM THE DEFAULT'. You can customise your script from here if you plan to change the image viewer's appearance, what its ignored class is, and so on.
CSS Guide
- Note: Some CSS settings need to be set through the .js files, read the installation and use guide for more information
- #sc_icep_imgsViewer = Image viewer's container, entire element
- #sc_icep_imgsViewerBox = Table box containing the gallery buttons and main image
- #sc_icep_imgsHolder = Main image (note: background-image properties are not editable, they're used to show the image)
- #sc_icep_imgsText = Text box holding the alt caption
- .sc_icep_galleryButton = The gallery buttons
⌛ Image Preloader Plugin V1.0
Features
- Settings to hide or show the page while images are loading
- Settings to show loading progress
- Settings to show images that are loading or hide them
A plugin that preloads images on a webpage to make sure everything is displayed correctly.
Example: Example HTML pageDownload: .JS file
Plugin Details
Last Updated: 18th October 2023
Item Name: sc_ipp
Status: Complete
Type: Plugin
Javascript: Required
Files Included: Javascript file
Example: Example HTML page
Installation Guide
- Install the Javascript file from the 'download' tab above and place it in the same folder as your HTML file. Open your HTML file and place the following code just above the </body> tag:
<script src="scPlugin_ImagePreloader.js"></script> - You can place it in another folder, but change the src to match its new location. For example: if you place in a folder named 'scripts', which is in the same place as your HTML file, you'd put:
<script src="scripts/scPlugin_ImagePreloader.js" type="text/javascript"></script> - The plugin is now successfully installed on your HTML page and will run (as long as Javascript is enabled). You will need to copy that line of code to any HTML page you want it to run on. If you want to customise it more, you can open the .js file and scroll down until you see '// FILL IN ANY VARIABLES BELOW IF YOU WANT TO CHANGE THEM FROM THE DEFAULT'. You can customise your script from here if you plan to change the image loader's appearance, if loading progress is shown, and so on.
CSS Guide
- Note: Some CSS settings need to be set through the .js files, read the installation and use guide for more information
- #sc_ipp_preloader = Image preloader's container, entire element
- #sc_ipp_preloaderText = The text displayed for loading progress, and the screen to hide images
- .sc_ipp_loadingImage = The images shown in the preloader
🖼 Responsive Image Maps Plugin V1.0
Features
- Automatically resizes areas for image maps, regardless of size
- Works for skewed and distorted images
A plugin that makes image maps responsive, allowing them to be any scale without needing to write multiple coordinates for the same area.
Example: Used in Interactive Map Widget exampleDownload: .JS file
Plugin Details
Last Updated: 8th August 2023
Item Name: sc_rimp
Status: Complete
Type: Plugin
Javascript: Required
Files Included: Javascript file
Example: Used in Interactive Map Widget example
Installation Guide
- Install the Javascript file from the 'download' tab above and place it in the same folder as your HTML file. Your HTML file will need an image map in it, otherwise the script will cause an error.
- Open the HTML file with the image map and place the following code just above the </body> tag:
<script src="scPlugin_ResponsiveImageMaps.js" type="text/javascript"></script> - You can place it in another folder, but change the src to match its new location. For example: if you place in a folder named 'scripts', which is in the same place as your HTML file, you'd put:
<script src="scripts/scPlugin_ResponsiveImageMaps.js" type="text/javascript"></script> - Find your image map in your HTML code. If it doesn't have an ID then give it the id 'sc_rimp_image', and give your areas shapes the class 'sc_rimp_area'.
- Open the .js file and locate the '// FILL IN ANY VARIABLES BELOW IF YOU WANT TO CHANGE THEM FROM THE DEFAULT' line. Replace the sc_rimp_originalWidth and sc_rimp_originalHeight values with the original size of your image map. For example, if it was 1920px by 1080px:
const sc_rimp_originalWidth = 1920;
const sc_rimp_originalHeight = 1080; - If your image's id and areas' class are already set, you can change the sc_rimp_mappedImageId and sc_rimp_mapAreasClass values to match.
- The plugin is now successfully installed on your HTML page and will run (as long as Javascript is enabled). You will need to copy the first line of code to any HTML page you want it to run on.