I have things almost where I want them. When I started working with jquery tools, I didn't realize that the project was dead and that the forums seem permanently down. However, I ALMOST have what I need.
All I need at this point is to get the mouseover working for areas on an imagemap. I have the click working. The work in progress is at http://mtauburn.netcontrolinc.com/joomla/contact-us/360-joomla-content
I have an image with an image map
<img name="circle" src="images/mt-auburn-360.jpg" alt="mt-auburn-360" usemap="#mt-auburn-360-map" />
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
There is some css styling
I am preloading the images but I'm not sure that is necessary.
<script language="javascript" type="text/javascript">// <![CDATA[
Image0 = new Image(800, 659)
Image0.src = "http://mtauburn.netcontrolinc.com/joomla/images/mt-auburn-360.jpg"
Image1 = new Image(800, 659)
Image1.src = "http://mtauburn.netcontrolinc.com/joomla/images/mt-auburn-360-slice-1.jpg"
Image2 = new Image(800, 659)
Image2.src = "http://mtauburn.netcontrolinc.com/joomla/images/mt-
(clipped out the repetitive code
// ]]>
I have functions that were handling the overlay of the slices in my old version. I don't think this is necessary with jquery tools
//
}
function slice4() {
document.circle.src = Image4.src;
This code seems to be what makes the jquery tools actually work. I added the area, onhover and onmouseover to try to get it to work.
$(document).ready(function() {
$("img[rel]").overlay();
$("area[rel]").overlay();
$("onhover[rel]").overlay();
$("onmouseover[rel]").overlay();
});
There is code which does the styling of the overlay
<style>
/* the overlayed element */
.simple_overlay {
/* must be initially hidden */
display:none;
/* place overlay on top of other elements */
z-index:10000;
/* styling */
background-color:#333;
width:675px;
min-height:200px;
border:1px solid #666;
/* CSS3 styling for latest browsers */
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
}
/* close button positioned on upper right corner */
.simple_overlay .close {
background-image:url(/media/img/overlay/close.png);
position:absolute;
right:-15px;
top:-15px;
cursor:pointer;
height:35px;
width:35px;
}
Here is the code that links the image for the overlay of one of the slices
<div name="slice1ovr" class="simple_overlay" id="slice2">
<!-- large image -->
<img src="images/mt-auburn-360-slice-2.jpg" />
<!-- image details -->
<div class="details">
<h3>The Barcelona Pavilion</h3>
<h4>Barcelona, Spain</h4>
<p>The content ...</p>
</div>
</div>
And then I have my image map, part of it is here
<area shape="poly" coords="397,278,476,140,530,182,565,238,577,284,580,318,421,319,415,293" alt="National Training Team" href="http://mtauburn.netcontrolinc.com/joomla/images/mt-auburn-360-slice-1.jpg" onmouseover="slice1()" onmouseout="original()">
<area shape="poly" coords="399,359,483,492,530,456,561,405,575,363,581,319,421,319,417,341" alt="National Performance Team" href="http://mtauburn.netcontrolinc.com/joomla/images/mt-auburn-360-slice-2.jpg" rel="#slice2" $("#slice2").overlay({event:'mouseover'});" onmouseout="original()" >
<area shape="poly" coords="350,361,278,503,324,519,364,526,425,520,485,495,398,359,376,366" alt="National Retention Team" href="http://mtauburn.netcontrolinc.com/joomla/images/mt-auburn-360-slice-3.jpg" onmouseover="slice3()" onmouseout="original()">
<area shape="poly" coords="328,317,169,317,175,382,200,430,242,479,277,501,351,359,332,340" alt="National Purchasing Team" href="http://mtauburn.netcontrolinc.com/joomla/images/mt-auburn-360-slice-4.jpg" onmouseover="slice4()" onmouseout="original()">
If you mouse over any of the slices, the images swap with my original document.circle code in the functions. However, I could not get any transitions to work with that. So, I tried jquery tools. If you click on the slice that is around the 3 o'clock position, an overlay shows that has the css formatting.
All I need to do to finish this is to figure out how to make the overlay appear on a mouseover instead of a click.
I'd really appreciate any help
thanks
I think you want something like this:
$('.hover-element').mouseover(function(){
$('overlay-selector').overlay({
load:true //this makes the overlay load when function is called instead of on click
});
});
http://api.jquery.com/mouseover/
The default overlay loads on a click, so see the section titled 'Opening overlays programmatically' here:
http://jquerytools.org/demos/overlay/trigger.html
Related
I tried to make a big map for my fantasy map project, the map itself is a lossless .WebP image. Is it possible if I can make CSS overlay with specific coordinates based on <area target="" href="" coords="" shape="poly">. And with that information I'd make it so that it would generate SVG for the actual overlay, then making it dark with opacity when I hover over that specific area only.
Since I have no idea how to do this I tried watching several videos, but they're always referencing the actual base image in .svg, then they used coordinates from the actual .svg base image itself to make it work. But the issue is that my image is in .WebP format image, which in this case is pretty different, and I can't just convert it to .svg without countless hours of work.
Currently, the codes are :
HTML
<div class="map">
<img src="https://github.com/DylonKejhu/DylonKejhu.github.io/blob/main/resources/images/AurelisMap.webp" usemap="#image-map">
<map name="image-map">
<area target="" alt="DylonKejhu Union" title="DylonKejhu Union" href="/countries/dku.html" coords="3787,1099,3804,1126,3795,1183,3809,1223,3778,1263,3787,1298,3817,1303,3870,1347,3915,1351,3946,1338,3981,1316,4016,1320,4047,1307,4140,1276,4224,1294,4290,1303,4325,1303,4361,1289,4409,1272,4462,1267,4511,1232,4507,1188,4502,1161,4489,1099,4454,1068,4449,1033,4484,1007,4520,1007,4560,1015,4590,1020,4630,1011,4666,967,4696,958,4714,914,4776,861,4670,790,4643,773,4502,711,4462,715,4383,813,4325,816,4277,790,4228,790,4188,781,4162,746,4113,728,4074,728,4038,759,3954,834,3902,891,3857,900,3813,931,3774,953,3818,1010,3787,1046" shape="poly">
</map>
</div>
css
.map {
height: 750px;
width: 100%;
overflow: scroll;
Border: 12px double black;
}
I've been using javascript (with a very limited knowledge) to swap images but now I want to do it with text.
My question is, if I have 10 different paragraphs (link 1 shows paragraph 1, link 2 shows paragraph 2 etc), I don't understand where I can 'type' them. My images obviously link to a ready made file but I want my text to remain as text and I'm not sure how I assign this in either CSS or HTML etc.
CODE USED:
So far I have my CSS code to define my text content (that I want to change depending on the clicking) and my map content where I'm controlling the change in text:
#content
#content div {float:left;}
#content_map {width:595px; height: 595px; margin-bottom: 15px; margin-right:15px;}
#content_text {width:290px; height: 595px; margin-bottom: 15px;}
#content_profile {width:900px; height: 755px; margin-bottom: 15px;}
So my html so far for the map 'hotspots' are as an example:
<area shape="circle" coords="276,326,15" href="#" alt="Kinnloch" onclick="MM_swapImage('stboswells_01','','discover_kinnloch.png',1)"/>
<area shape="circle" coords="202,264,11" href="#" alt="Lochinver" onclick="MM_swapImage('stboswells_01','','discover_lochinver.png',1)"/>
...
etc
so basically I'm swapping images in the 'profile' div by the coordinates on the 'map' div and what i want to do is use these coordinates to also swop in text in my 'text' div so the first set of coords would change my text div to say 'Discover Kinnloch' and the second set of coordinates would change my text div to say 'Discover Lochinver' etc...
It almost sounds like you want expanding sections.
You could have the content already in the html hidden by CSS, and show it via javascript. Here's an example using jQuery.
<div class="container">
Header 1
<p class="container-body">This is a test.</p>
</div>
<div class="container">
Header 2
<p class="container-body">This is another test.</p>
</div>
Hidden by CSS:
.container-body {
display: none;
}
And toggled by the JavaScript:
$(".container a").click(function () {
$(".container-body", $(this).parent()).slideToggle();
});
Here's a quick fiddle showing it in action: http://jsfiddle.net/yv9QG/
Alternatively, if you're talking about swapping text in a target space it's only a few minor changes and you end up with something like this: http://jsfiddle.net/yv9QG/1/
i am developing a webpage which has two images both set to 512x400px settled in a div
on page load, the first image displays, then on a time delay a second image floats from behind to in front of the first image, the top image is a transparent png,
i have got the jquery working and loks great, the first image loads then after a few seconds the second image appears sliding from the left under the first and over the top of the first image,
the second image is transparent during the transition and i can see the first image all the way upto the poiint that the second image lands directly over the first, then the area turns white,
i checked firebug and the image on top is definatly png, ???
can anyone help ?
below is my code 'thats works apart from the final stage transparency bottom image show through'
html
<div class="slider">
<ul id="slider1">
<li><img src='<%# /* Graphic ADOR */ AdorRec.FieldValue("ShopExit", Container) %>' alt="Cross-Media Finnished Shopping" width="512" height="400" />
</li>
<li>
<img src='<%# /* Graphic ADOR */ AdorRec.FieldValue("MobileOffer", Container) %>' alt="Cross-Media Mobile SMS Offer" width="512" height="400" /></li>
</ul>
</div>
css
.slider {
margin: 0 auto;
width: 512px;
height: 400px;
border: 8px solid #ffffff;
border-radius:5px;
-moz-border-radius: 5px;
box-shadow: 2px 2px 4px #333333;
background:transparent;
}
script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
and
<script language="javascript">
$(document).ready(function(){
$('#slider1 a:first').css({opacity: 1.0});
$('#slider1') .cycle({
fx: 'shuffle',
//'scrollLeft,scrollDown,scrollRight,scrollUp',blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, none, scrollUp,scrollDown,scrollLeft,scrollRight,scrollHorz,scrollVert,shuffle,slideX,slideY,toss,turnUp,turnDown,turnLeft,turnRight,uncover,ipe ,zoom
autostop: 1,
rev: 1,
speed: '2000',
timeout: 3000
});
});
</script>
please bare in mind i am a very noob at this, and thank anyone for there time in responding
regards matt
Have you checked your second image? Here's a fiddle using your code and the example photos from the Cycle plugin site. I can reproduce your error by providing a broken image link for the second photo.
You also might want to consider using #slider1 {list-style: none;} to get rid of those bulleted list items
Fiddle - http://jsfiddle.net/N4aJU/
I have this idea to make separate and various parts of a picture(not text) link to different pages or websites, and I want to accomplish without actually creating different photos and the putting them close to one another so it looks like it's one complete picture.
Does anybody here have an idea on how to accomplish this using to kind of variation to JavaScript, like jQuery or pure JavaScript or something?
Thanks! :-)
I guess, you want to make various portions of an image interactive. i.e. user should navigate to different locations clicking on different sections of the image or perform some animation.
There are multiple ways to go about it.
image map.
you can create various clickable sections on image like given below:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
2. Create various closely positioned divs (or anyother suitable container, even the img tags itself), and use CSS: Background-position property. something like
<div style="background-image:url('myImage.png'); background-position:0 0; width:50px height:50px" >
</div>
<div style="background-image:url('myImage.png'); background-position:50 0; width:50px height:50px" >
</div>
<div style="background-image:url('myImage.png'); background-position:0 50; width:50px height:50px" ></div>
<div style="background-image:url('myImage.png'); background-position:50 50; width:50px height:50px" >
</div>
learn more about background-position
also take a look at Image Sprites
Have you tried HTML Image Maps...?
An image map is a picture in which areas within the picture are links. Creating an image involves using the <IMG ...>, <MAP ...>,and <AREA ...> tags..
Sure CSS will do.
HTML:
<div id="linkPictureThing">
<img src="yourimgage.png" title="" alt=""/>
</div>
CSS:
a,img{border:none;}
#linkPictureThing>img{
width:100%;
height:100%;/*or auto */
z-index:-1;
}
links:
#linkPictureThing>a.imageSection{
display:inline-block;/*Sorry [lt IE 8] lover*/
width:50%;
height:50%;
z-index:1;
content:'';
}
a.imageSection:hover{
background:#FF0000;
opacity:0.8;
}
Or could try relative/absolute positioning with the links to get a more unique location:
#linkPictureThing>a.imageSection:first-child{
position:absolute;
top:20;
left:0;
}
The most correct semantical way is use image maps.
The most easiest way is to place a div on top of the image. In this div make two clickable blocks on different areas.
Example found on http://jsfiddle.net/3mQV2/ with the following code. The advantage of this example is that search engines can index both links.
HTML
<img src="http://lorempixel.com/400/200/" />
<div>
<!--
-->
</div>
CSS
img {
width:400px;
height:200px;
position:absolute;
}
div {
width:400px;
height:200px;
position:relative;
}
div a {
display:inline-block;
width:200px;
height:200px;
}
div a:nth-child(1):hover {
background-color:blue;
}
div a:nth-child(2):hover {
background-color:red;
}
Below is my code that has three images aligned horizontally next to each other. Upon clicking each image I've added some simple action to remove the other images but image 2 and image 3 if clicked will still remain in their present area as opposed to Left Aligned like image 1. Is there a way I can Left Align image 2 or 3 if they are clicked? Many thanks
<div style="width:510px; height:105px; padding:5px;">
<img alt="Passenger Vehicle" id="V1" src="http://hou-agsprd02/images/basictruck.gif" onclick="Vehicle1()" style="width:150px; height:100px; border:1px solid blue; float:left;" />
<img alt="Water Vehicle" id="V2" src="http://hou-agsprd02/images/WaterTruck.gif" onclick="Vehicle2()" style="width:150px; height:100px; border:1px solid blue; float:left;" />
<img alt="Rig Transport Vehicle" id="V3" src="http://hou-agsprd02/images/GasTruck.gif" onclick="Vehicle3()" style="width:150px; height:100px; border:1px solid blue; float:left;" />
</div>
Here is my code in another function that hides images 2 and 3 if image 1 is clicked, sorry for leaving that out.
document.getElementById('V2').style.visibility = 'hidden';
document.getElementById('V3').style.visibility = 'hidden';
You're setting the visibility to hidden, which essentially hides the block, but still takes up space in the layout.
What you want to do is remove the space where the block once was, by setting the display attribute to none.
Based on your javascript code, you can do it by changing your code to this:
document.getElementById('V2').style.display = 'none';
document.getElementById('V3').style.display = 'none';
After doing this, you'll notice that the block will be removed, and the elements around it will collapse into the areas where the hidden blocks once were.
What is your Javascript code?? If you are just making the image hidden, it is still there. You will need to actually remove the image from the page, then the images will fill it's place since they are floating left.