We Keep Coding

DIV Conditioning - Checking if an IMG exists within a DIV

I have the following lines of code in my website:
HTML:
<div class="the-post-thumbnail">
<p><img src="http://placehold.it/350x150/FF0000/FFFFFF?text=Automatic+Thumbnail" alt="" width="" height="" /></p>
</div>
<div class="post-body">
<p><img src="http://placehold.it/350x150/00FF00/FFFFFF?text=Manual+Thumbnail" alt="" width="" height="" /></p>
<p>Paragraph</p>
<p><img src="http://placehold.it/350x150/0000FF/FFFFFF?text=Body+Image" alt="" width="" height="" /></p>
</div>
JavaScript/jQuery:
var ele = $('.post-body p:has(img):first');
if ($('.the-post-thumbnail img').length) {
ele.hide();
}
else {
ele.show();
}
What I am trying to do is:
Check if there is an image within the the-post-thumbnail div and if so, hide the manual thumbnail image within the post-body
Check if there is not an image within the the-post-thumbnail div and if so, show the manual thumbnail image within the post-body
This is partially working, however, what I've noticed is that if I remove the manual thumbnail image from within the post-body div, it will remove the second body image after the paragraph tag as well.
How can I target just the manual thumbnail image which is directly within the post-body div correctly so that I can achieve the two list items above, without adding additional classes?
FYI:
This is due to swapping my website's theme for a different one. The older version required me to place in a thumbnail image for each post manually at the top of the article, and the new theme does this for me automatically. This resulted in duplicate images for older posts.
CodePen Example

Working fiddle.
Just changing the position of :first selector should do the work, because it will select always the first p and check if it has an image :
var ele = $('.post-body p:first:has(img)');
Hope this helps.

Without using any extra selectors, you could check for an image in the first paragraph.
var ele = $('.post-body p:eq(0):has(img)');

Html image hotspot switch image

I have an image hotspot on a map which swops the image out on hover however I would like keep the image open for longer and only have it close (and change back to the original) if the users moves their cursor outside of the new swapped image outline instead of the original hotspot, is something like this possible?
Herewith my code so far
<div class="mapwrap" style="text-align:center;"><img src="/dev/test/templates/jwd25template/images/map-blank.png" alt="wc" name="map" width="700" height="400" usemap="#mapMap" id="map" border="0" ></div>
<map name="mapMap">
<area shape="poly" coords="231,299,236,309,239,314,242,324,242,333,241,340,237,342,232,342,232,346,236,348,239,352,242,359,244,360,246,363,249,371,245,374,243,378,244,379,252,373,253,375,255,378,255,380,260,382,260,381,266,384,269,387,272,389,275,390,276,390,279,390,287,386,288,383,293,381,298,380,303,379,306,379,307,380,310,380,314,378,317,378,320,378,322,376,325,374,330,372,337,370,342,370,347,372,349,372,355,372,358,370,359,369,355,366,352,363,354,358,356,358,354,355,349,354,348,354,342,355,339,352,339,348,341,344,344,339,349,337,352,332,352,327,357,325,362,324,370,323,373,316,372,312,367,309,366,310,360,308,355,311,350,315,346,317,342,315,337,313,331,310,327,307,326,314,325,318,323,322,321,324,314,324,309,327,306,330,304,334,303,335,300,337,297,339,294,341,291,341,288,341,283,339,280,334,280,329,283,325,283,324,277,328,271,331,269,334,269,335,266,327,269,321,266,319,264,317,257,315,257,310,256,302,255,296,255,292,254,286,246,281,239,280,240,285,233,287,231,293,229,296,229,296" href="takke/western-cape" target="_parent" alt="WC" onMouseOver="MM_swapImage('map','','/dev/test/templates/jwd25template/images/map-WC-2.png',1)" onMouseOut="MM_swapImgRestore('map','','/dev/test/templates/jwd25template/images/map-blank.png',1)"></map>
I tried to add a onMouseOut url but I realise that wont work.
Trying to wrap my head around it, any ideas would be much appreciated :)

You can do this with CSS
HTML CODE:
<map id="big_map_area">
<area shape="poly" id="map_hover" coords="231,299,2..." href="takke/western-cape" target="_parent" alt="WC">
</map>
CSS CODE:
#map_hover {
opacity:0.0;
}
JQUERY CODE:
$("#map_hover").mouseover(function () {
this.css('opacity', '1.0');
});
$("#big_map_area").mouseout(function () {
$("#map_hover").css('opacity', '0.0');
});
So you show your image when mouse enter in small poligon that is inside tha map, and image swap when you leave the big map container.
Now it should work.

Using jQuery mouse click event to permanently change text in a DIV tag

I have setup javascript mouse click events to detect where on an image a user clicks, based on what area of the image is clicked text in a div tag is updated. The problem is the text in the div tag changes for a quick second, then reverts back to the original text in the HTML.
Javascript:
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#area1").click(function (b) {
$("#results").html("Text replaced by JS Mouse Click for area1");
});
$("#area2").click(function (b) {
$("#results").html("Text replaced by JS Mouse Click for area2");
});
$("#area3").click(function (b) {
$("#results").html("Text replaced by JS Mouse Click for area3");
});
});
</script>
HTML:
<img id="pic" usemap="#imagemap1" src="image.jpg" />
<map id="imgmap" name="imagemap1">
<area id="area1" shape="circle" alt="" title="" coords="51,46,25" href="" target="" />
<area id="area2" shape="circle" alt="" title="" coords="71,131,25" href="" target="" />
<area id="area3" shape="circle" alt="" title="" coords="141,72,25" href="" target="" />
</map>
<div id="results">
Original HTML Text
</div>
The text in the DIV tag WILL change, but only for a second before returning to "Original HTML Text". How can I permanently change the text in the DIV tag until the user clicks on another part of the image map?

It sounds like a default action is triggering with your clicks, refreshing the page. Try preventing that. Also, I shortened your 3 click handlers into one.
$("[id^='area']").click(function (e) {
e.preventDefault();
$("#results").html("Text replaced by JS Mouse Click for " + $(this).attr("id"));
});

I think this would be a better solution.
Target all children of #area
Do you really want to hardcode your text in your JavaScript ? Use the data attribute and you'll be able to generate that server side. using $(e.currentTarget) you'll also be able to access your coordinates and other attributes that you have there.
Now you can reduce your code significantly:
$(document).ready(function () {
$("#imgmap area").click(function (e) {
var description = $(e.currentTarget).data("description");
e.preventDefault();
$("#results").text(description);
});
});
From what I understand, people like cats and JSFiddles. So here is a JSFiddle with a cat to demonstrate the code above: http://jsfiddle.net/27QtT/

HTML/Javascript Overlaying Images on Region Mouseovers

So I have an image on a page and an imagemap corresponding to that image, then I also have two corresponding images, each the same size as the first (mostly transparent) that I want to overlay onto that image when a certain region of the imagemap is moused over. How would I go about doing that, is this something I can accomplish with CSS or will I need javascript for it?

I think you do need Javascript as not all browsers support css hover psuedo-class on elements other than <a>. You should be able to do it with minimal Javascript. See the <map> tag: http://www.w3schools.com/tags/tag_map.asp
For example, if you want mousing over the 100 by 100 pixel square in the top left of your image (image1.png) to enable the overlay image (image2.png):
<script type="text/javascript">
function area1_mouseover() {
document.getElementById('image2').style.visibility = 'visible';
}
function area1_mouseout() {
document.getElementById('image2').style.visibility = 'hidden';
}
</script>
<img src="image2.png" id="image2" style="position: absolute; visibility: hidden; z-index: 2;" usemap="#my_map" />
<img src="image1.png" id="image1" usemap="#my_map" />
<map name="my_map">
<area shape="rect" coords="0,0,100,100" onmouseover="area1_mouseover();" onmouseout="area1_mouseout();" />
</map>
Edit: applying the map to all the images should solve that problem since they are all the same size.

Getting jQuery tooltip to have a tip start as active when page first loads

I'm using the jQuery tooltip plug in on an image map. When a part of the image is hovered over, the tip appears. This is activated with the following code:
$(function() {
$("map > area").tooltip({ positionLeft: true });
});
The html for the image map is set up like this:
<map name="Map">
<area shape="rect" coords="36,466,64,507" href="link.aspx" alt="Alt Title" title="ToolTip Title" />
<area shape="rect" coords="36,466,64,507" href="link.aspx" alt="Alt Title2" title="ToolTip Title2" />
</map>
I'd like to have one of the tool tips be in the active (or hovered) state when the page first loads. I'm having a hard time figuring out how to do this, or if it is even possible.
Has anybody used this plugin and have any ideas of how I could implement this feature?

When the page is finished loading you can trigger the mouseover.
$("[name='Map']").trigger("mouseover");

You could focus mouse on preferable part of the map or trigger event (probably hover) that activates tooltip.